用three.js在網頁實現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官方的案例。