thress.js obj加载

添加依赖：

<script type="text/javascript" src="asset/js/three.js"></script>
<script type="text/javascript" src="asset/js/MTLLoader.js"></script>
<script type="text/javascript" src="asset/js/OBJLoader.js"></script>

// init renderer
    var renderer    = new THREE.WebGLRenderer({
        antialias: true,                                    //开启抗锯齿
        alpha: true                                          //开启背景透明
    });
    renderer.setClearColor(new THREE.Color('lightgrey'), 0);
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio(window.devicePixelRatio);//这个开启 HIDPI 可以考虑留着。
    renderer.domElement.style.position = 'absolute';
    renderer.domElement.style.top = '0px';
    renderer.domElement.style.left = '0px';
    document.body.appendChild(renderer.domElement);

 

    //init camera
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set(0, 0, 10);
    camera.lookAt(new THREE.Vector3(0,0,0));
   

     // init scene   
    var scene = new THREE.Scene();
    var light = new THREE.DirectionalLight(0xffffff,0.6);
    light.position.set(0,10,20);
    light.castShadow = true; // 启用阴影选项
    scene.add(light);
    var ambilight = new THREE.AmbientLight(0xffffff,0.5); //环境光设置
    scene.add(ambilight);
    scene.add(camera);  

  

    //load obj
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath( 'obj/' );
    mtlLoader.load( "aaa.mtl", function( materials ) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'obj/' );                    
    objLoader.load( "aaa.obj", function ( object) {     
        object.traverse(function(child) {
                if(child instanceof THREE.Mesh) {
                    var    material = new THREE.MeshPhongMaterial({
                              color:0xdfdfdf
                    });
                    material.shininess = 20;
                    child.material = material;
                }            
        });

        scene.add( object );
        object.position.set(0,1.1,0);
        object.scale.set(0.16,0.16,0.16);
         renderer.render( scene, camera );
         }, onProgress, onError );
      });            
            var onProgress = function ( xhr ) {

            if ( xhr.lengthComputable ) {

                var percentComplete = xhr.loaded / xhr.total * 100;

                console.log( Math.round(percentComplete, 2) + '% downloaded' );

            }

        };
        var onError = function ( xhr ) { };