用three.js在网页实现3D模型的展示

作者 | 林智超__

来源 | 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官方的案例。

本文完~