本文重点介绍如何基于Threejs对glb三维模型进行预览，关于threejs和三维建模等不在本文讨论之内，想详细了解threejs和glb三维模型的，请自行百度学习。
言归正传，使用threejs进行三维模型展示，通常需要依赖以下组件：
Threejs+OrbitControls+GLTFLoader+WebGL
以上组件可以从threejs的官网获取，下载后的目录如下所示：
第一步、创建html，引入相关的js资源
代码如下：
<htmllang="en"><head><title>3D模型实时观看</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body { font-family: Monospace; background-color: #fff; color: black; margin: 0px; overflow: hidden; } #modelBorderContainer{ display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; } #modelBorder { max-width: 512px; width: 100%; height: 50%; } canvas{ position: absolute; top: 0%; left: 0%; } </style></head><body><divid="modelBorderContainer"><divid="modelBorder"></div></div><scripttype="application/javascript">varmodelUrl='models/Cesium_Air.glb'; //定义所使用模型路径</script><scriptsrc="lib/three.min.js?v=2.0.3"></script><scriptsrc="lib/OrbitControls.js?v=2.0.3"></script><scriptsrc="lib/GLTFLoader.js?v=2.0.3"></script><scriptsrc="lib/WebGL.js?v=2.0.3"></script><scriptsrc="lib/stats.min.js?v=2.0.3"></script><scriptsrc="lib/3dmodel.js?v=2.0.3"></script></body></html>
第二步、在3dmodel.js 中定义如何基于threejs进行加载。
1、创建三维预览需要的相机、场景、灯光等信息
function init() { if (!modelUrl) { return false; } container = document.createElement( 'div' ); document.body.appendChild( container ); scene = new THREE.Scene(); bbox = new THREE.Box3(); scene.background = new THREE.Color( 0xeeeeee ); light = new THREE.HemisphereLight( 0xbbbbff, 0x444422, 1.5 ); light.position.set( 0, 1, 0 ); scene.add( light ); var loader = new THREE.GLTFLoader(); loader.load( modelUrl, function ( gltf ) { gltf.scene.name = '3dmodel'; this.setContent(gltf.scene); scene.add( gltf.scene ); }, undefined, function ( e ) { console.error( e ); } ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.gammaOutput = true; container.appendChild( renderer.domElement ); window.addEventListener( 'resize', onWindowResize, false ); camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.01,1000); controls = new THREE.OrbitControls(camera); // to disable pan controls.enablePan = false; // to disable zoom //controls.enableZoom = false; controls.enableZoom = true; controls.target.set(0,0,0); controls.update(); }
2、定义模型的旋转运动和事件监听
function animate() { requestAnimationFrame( animate ); if (rotating) { scene.rotation.y += -0.005; } else { scene.rotation.y = scene.rotation.y; } renderer.render( scene, camera ); } function pauseRotation() { var modelBorder = document.getElementById("modelBorder"); modelBorder.addEventListener("mouseenter", function( event ) { rotating = false; }); modelBorder.addEventListener("mouseleave", function( event ) { rotating = true; }); modelBorder.addEventListener('touchmove', function(e) { rotating = false; }, false); modelBorder.addEventListener('touchstart', function(e) { rotating = false; }, false); modelBorder.addEventListener('touchend', function(e) { rotating = true; }, false); }
3、定义加载模型的参数
function setContent(object) { object.updateMatrixWorld(); const box = new THREE.Box3().setFromObject(object); const size = box.getSize(new THREE.Vector3()).length(); const boxSize = box.getSize(); const center = box.getCenter(new THREE.Vector3()); object.position.x += object.position.x - center.x; object.position.y += object.position.y - center.y; object.position.z += object.position.z - center.z; this.camera.position.copy(center); if (boxSize.x > boxSize.y) { this.camera.position.z = boxSize.x * -2.85 } else { this.camera.position.z = boxSize.y * -2.85 } this.camera.lookAt(0, 0, 0); }
将编辑好的代码发布至nginx后，可以看到以下的效果。
切换其它模型，如飞机等：
通过本文可实现三维Glb模型的预览，目前还存在一点问题，比如支持的格式限于glb，对于gltf或者3dmax的模型不支持。
上述代码可在码云上下载:https://gitee.com/yelangcode/threejs_model_view,有兴趣的朋友可自行fork。
