|
最近在做一個在網(wǎng)頁端展示3D模型的項目,，現(xiàn)在簡單介紹一下怎么實現(xiàn)功能。首先,，下載three.js文件,，在threejs官網(wǎng)能下，這里附上地址鏈接一條https:///然后,，下載解壓,，會得到three.js-master文件，在build目錄找到three.js,，這個是three.js的核心功能庫,。在example/js/loaders目錄，你會看到各種模型格式加載的js文件,。本次以加載obj模型為例,，準備好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();
// 加載進度
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)建一個透視相機,，設(shè)置相機視角60度,，最遠能看1000，最近能看1
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 200, 400 ); //設(shè)置相機位置
//控制相機
controls = new THREE.OrbitControls( camera );
//設(shè)置相機移動距離
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ù)制就能用,，但原理和細節(jié)這里的篇幅解釋不了的那么多谷歌瀏覽器展示效果如下，720度旋轉(zhuǎn)和放大縮小都可以,。最后,，如果想繼續(xù)了解更多的功能，可以參考threejs官方的案例,。
|
