作者 | 林智超__ 來源 | https://www.jianshu.com/p/0798a76121af 最近在做一個在網頁端展示3D模型的項目，現在簡單介紹一下怎麼實作功能。 首先，下載下傳three.js檔案，在threejs官網能下，這裡附上位址連結一條https://threejs.org/
然後，下載下傳解壓，會得到three.js-master檔案，在build目錄找到three.js，這個是three.js的核心功能庫。在example/js/loaders目錄，你會看到各種模型格式加載的js檔案。
本次以加載obj模型為例，準備好obj和mtl檔案的模型素材。建立場景的js檔案用到基本的three.js，加載模型的js檔案用到DDSLoader.js，MTLLoader.js，OBJLoader.js，鏡頭的轉動用OrbitControls.js檔案。 當然也有其他功能實作替代的js檔案，用到的js檔案不唯一，檔案路徑自行設定。本次執行個體導入如圖js檔案
實作的Javascript代碼如下，注釋會解釋各塊代碼是幹嘛用。
var camera, controls, scene, renderer;init();animate();// 加載進度var onProgress = function(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; var percent = document.getElementById("info"); percent.innerText = Math.round(percentComplete, 2) + '% 已經加載'; } }; var onError = function(xhr) {};//當mtl中引用了dds類型的圖檔時，還需導入DDSLoader檔案THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );//mtl檔案加載器var mtlLoader = new THREE.MTLLoader();//你的模型材質檔案的目錄地方路徑 mtlLoader.setPath('model/yjq/');//導入材質檔案 mtlLoader.load('yjq.mtl', function(materials) { materials.preload(); //ob檔案加載器 var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials);//你的模型檔案的目錄地方路徑 objLoader.setPath('model/yjq'); objLoader.load('yjq.obj', function(object) {//這裡的object參數就是模型加載方法的回調函數，object就是你的模型，下面的屬性自行設定 // object.position.y = 0; // object.rotation.x = -90; // object.rotation.y = 90; // object.rotation.z = 90; //自行調整模型比例 object.scale.set(10, 10, 10); //加入到場景中 scene.add(object); }, onProgress, onError); });function init() { //建立一個透視相機，設定相機視角60度，最遠能看1000，最近能看1 camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.set( 0, 200, 400 ); //設定相機位置 //控制相機 controls = new THREE.OrbitControls( camera );//設定相機移動距離 controls.minDistance = 100; controls.maxDistance = 900; //建立場景 scene = new THREE.Scene(); //設定場景背景色，灰色 scene.background = new THREE.Color( 0xeeeeee ); //場景中添加網格輔助 scene.add( new THREE.GridHelper( 400, 10 ) );// 燈光// 給場景添加一個環境光 var ambientLight = new THREE.AmbientLight( 0xfff ); scene.add( ambientLight );// 給場景添加一個半球光出來 hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.8 ); hemiLight.color.setHSL( 0.6, 1, 0.6 ); hemiLight.groundColor.setHSL( 0.095, 1, 0.75 ); hemiLight.position.set( 0, 50, 0 ); scene.add( hemiLight );// 給場景添加一個平行光出來 dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 ); dirLight.color.setHSL( 0.1, 1, 0.95 ); dirLight.position.set( -1, 1.75, 1 ); dirLight.position.multiplyScalar( 30 ); scene.add( dirLight ); dirLight.castShadow = true; //執行個體化一個渲染器s renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );}function animate() { //每一幀渲染一次畫面,不然畫面是靜止的 requestAnimationFrame( animate ); renderer.render( scene, camera );}
代碼直接粘貼複制就能用，但原理和細節這裡的篇幅解釋不了的那麼多 谷歌浏覽器展示效果如下，720度旋轉和放大縮小都可以。最後，如果想繼續了解更多的功能，可以參考threejs官方的案例。
本文完~