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

最近在做一个在网页端展示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, newTHREE.DDSLoader());
    //mtl文件加载器
    var mtlLoader = newTHREE.MTLLoader();
    //你的模型材质文件的目录地方路径  
    mtlLoader.setPath('model/yjq/');
    //导入材质文件   
    mtlLoader.load('yjq.mtl', function (materials) {
        materials.preload();
        //ob文件加载器     
        var objLoader = newTHREE.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 = newTHREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set(0, 200, 400);
        //设置相机位置    //控制相机  
  controls = newTHREE.OrbitControls( camera );
        //设置相机移动距离  
  controls.minDistance = 100;
        controls.maxDistance = 900;
        //创建场景   
 scene = newTHREE.Scene();
        //设置场景背景色，灰色  
  scene.background = newTHREE.Color( 0xeeeeee );
        //场景中添加网格辅助  
  scene.add( newTHREE.GridHelper( 400, 10 ) );
        // 灯光// 给场景添加一个环境光   
 var ambientLight = newTHREE.AmbientLight( 0xfff );
        scene.add(ambientLight);
        // 给场景添加一个半球光出来  
  hemiLight = newTHREE.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 = newTHREE.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 = newTHREE.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官方的案例。