最近在做一個在網(wǎng)頁端展示3D模型的項目童本，現(xiàn)在簡單介紹一下怎么實現(xiàn)功能摄职。首先，下載three.js文件笼踩，在threejs官網(wǎng)能下逗爹，這里附上地址鏈接一條https://threejs.org/然后，下載解壓嚎于，會得到three.js-master文件掘而，在build目錄找到three.js，這個是three.js的核心功能庫于购。在example/js/loaders目錄袍睡，你會看到各種模型格式加載的js文件。
作者：林智超__
鏈接：http://www.reibang.com/p/0798a76121af
來源：簡書
簡書著作權(quán)歸作者所有肋僧，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處斑胜。
本次以加載obj模型為例，準(zhǔn)備好obj和mtl文件的模型素材嫌吠。創(chuàng)建場景的js文件用到基本的three.js伪窖，加載模型的js文件用到DDSLoader.js，MTLLoader.js居兆，OBJLoader.js覆山，鏡頭的轉(zhuǎn)動用OrbitControls.js文件。當(dāng)然也有其他功能實現(xiàn)替代的js文件泥栖，用到的js文件不唯一簇宽，文件路徑自行設(shè)置。本次實例導(dǎo)入如圖js文件
實現(xiàn)的Javascript代碼如下吧享，注釋會解釋各塊代碼是干嘛用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
var camera, controls, scene, renderer;
init();
animate();
// 加載進(jìn)度
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) + '% 已經(jīng)加載';
? ? ? ? }
? ? };
? ? var onError = function(xhr) {};
//當(dāng)mtl中引用了dds類型的圖片時魏割，還需導(dǎo)入DDSLoader文件
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
//mtl文件加載器
var mtlLoader = new THREE.MTLLoader();
//你的模型材質(zhì)文件的目錄地方路徑
? ? mtlLoader.setPath('model/yjq/');
//導(dǎo)入材質(zhì)文件
? ? 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參數(shù)就是模型加載方法的回調(diào)函數(shù)，object就是你的模型钢颂，下面的屬性自行設(shè)置
? ? ? ? ? ? // object.position.y = 0;
? ? ? ? ? ? // object.rotation.x = -90;
? ? ? ? ? ? // object.rotation.y = 90;
? ? ? ? ? ? // object.rotation.z = 90;
? ? ? ? ? ? //自行調(diào)整模型比例
? ? ? ? ? ? object.scale.set(10, 10, 10);
? ? ? ? ? ? //加入到場景中
? ? ? ? ? ? scene.add(object);
? ? ? ? }, onProgress, onError);
? ? });
function init() {
? ? //創(chuàng)建一個透視相機(jī)钞它，設(shè)置相機(jī)視角60度，最遠(yuǎn)能看1000，最近能看1
? ? camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
? ? camera.position.set( 0, 200, 400 );? ? //設(shè)置相機(jī)位置
? ? //控制相機(jī)
? ? controls = new THREE.OrbitControls( camera );
//設(shè)置相機(jī)移動距離
? ? controls.minDistance = 100;
? ? controls.maxDistance = 900;
? ? //創(chuàng)建場景
? ? scene = new THREE.Scene();
? ? //設(shè)置場景背景色遭垛，灰色
? ? scene.background = new THREE.Color( 0xeeeeee );
? ? //場景中添加網(wǎng)格輔助
? ? scene.add( new THREE.GridHelper( 400, 10 ) );
// 燈光
// 給場景添加一個環(huán)境光
? ? 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 );
}
代碼直接粘貼復(fù)制就能用尼桶，但原理和細(xì)節(jié)這里的篇幅解釋不了的那么多谷歌瀏覽器展示效果如下，720度旋轉(zhuǎn)和放大縮小都可以锯仪。最后泵督，如果想繼續(xù)了解更多的功能，可以參考threejs官方的案例
作者：林智超__
鏈接：http://www.reibang.com/p/0798a76121af
來源：簡書
簡書著作權(quán)歸作者所有庶喜，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處小腊。
