使用three.js加載3dmax資源，以及實現場景中的陰影效果

       使用three.js可以方便的讓我們在網頁中做出各種不同的3D效果。如果希望2D繪圖內容，建議使用canvas來進行。但很多小伙伴不清楚到底如何為我們繪制和導入的圖形添加陰影效果，更是不清楚到底如何導入我們已經制作好的3dmax資源。所以這篇教程將簡要介紹如何將我們用3dmax制作好的資源導入進來，以及如何為我們導入的資源，包括所有自己繪制的圖形添加陰影。也有很多小伙伴表示根本記不住這些八股文一般的代碼。其實，每次需要編寫代碼的時候參考官方案例即可，不必背誦代碼。如果編的多，那自然就記住了。如果編的少，我們也沒有必要付出大把時間背誦這些我們很少使用的代碼。

       首先，先介紹如何導入3dmax的資源。這里注意，經過我自己的測試，如果直接從本地打開文件的方式打開編寫的網頁，谷歌、IE等瀏覽器將無法顯示我們自己加載的資源，原因是由於本地打開文件后是file協議，所以瀏覽器會因為安全性問題阻止我們加載本地資源。而火狐瀏覽器卻可以正常打開。所以建議大家調試時使用火狐瀏覽器，或者使用tomcat、apache等先建立一個本地服務器，通過域名來訪問自己編寫的網頁。不推薦修改瀏覽器的安全性設置。

       我們先用3dmax制作一個圖形，這里選擇其自帶的茶壺。用3dmax制作茶壺的教程網上實在太多，所以這里不再贅述，請不會的小伙伴搜索教程即可，幾步即可搞定。        當然，制作好了之后不要忘記導出。我們需要將其導出成為一個mtl文件和一個obj文件。這一步操作大多制作茶壺的教程也都有，同樣是點點鼠標就行。至於材質等，我們這里不多考慮，畢竟學習要從簡單開始。

       導出如上圖的兩個文件之后，我們就可以參考官方的代碼導入我們自己的素材了。

       首先，我們除了three.js文件之外，還需要引入個三源文件。一個是OBJLoader.js，一個是MTLLoader.js,一個是DDSLoader.js。這些是官方提供的加載我們本地資源的庫文件，可以從官網下載。https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html    這個網址既是官方案例。我們需要的文件也可以在這里下載到。

       以下代碼便是將素材導入的代碼，我們除了像官方那樣導入文件之外，還加入了陰影效果。

var onError = function ( xhr ) { };
                THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath( './' );       //設置我們需要加載的mtl文件路徑
                mtlLoader.load( 'lyn.mtl', function( material ) {      //這里加載我們需要的文件名  
                    material.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( material );      //材質，也可自定義
                    objLoader.setPath( './' );               //設置要加載的obj文件的路徑
                    objLoader.load( 'lyn.obj', function ( object ) {           //加載obj文件
                        object.position.z = 1;         //這里設置我們的素材相對於原來的大小以及旋轉縮放等
                        object.position.y = -0.5;
                        object.scale.x = 0.2;
                        object.scale.y = 0.2;
                        object.scale.z = 0.2;
                        object1 = object;               //這里是對素材設置陰影的操作
                        for(var k in object.children){  //由於我們的素材並不是看上去的一個整體，所以需要進行迭代
                                                        //對其中的所有孩子都設置接收陰影以及投射陰影
                                                        //才能看到陰影效果
                            object.children[k].castShadow = true;   //設置該對象可以產生陰影
                            object.children[k].receiveShadow = true;  //設置該對象可以接收陰影
                        }
                        scene.add( object1 );
                        
                    }, onProgress, onError );
                });

       上述的代碼除了設置陰影以及調整大小之外，都是八股文，需要的時候復制粘貼即可，如果經常從事這方面開發，才建議檢查源代碼的實現。有時我們會發現，即便導入后，我們也無法看到素材。我們需要考慮以下幾方面問題。第一方面，我們是否將我們的3dmax素材做的太大或者太小。太大的話，我們只能看到素材的一部分，造成一種看不到的假象。太小，又會看不清楚或者無法顯示。這種問題就需要各位根據我們攝像機的視距等來調整了。還有一種問題，就是由於我們沒有為我們的素材設置材質，而且我們的代碼中沒有添加光源，導致只顯示黑漆漆的一片。所以，如果要看到這個素材，我們還需要添加光照。

      以下是添加聚光燈光源的代碼，因為聚光燈光源可以聚焦，我們演示會方便一些。小伙伴們也可以自己動手嘗試其他光源。記住，我們需要的是點光源或者平行光等光源。環境光是無法生成陰影的。但如果希望周圍顯示的更加清楚，我們也可以同時添加點光源和環境光，只是環境光的光強需要弱一些，避免環境光過強影響陰影的正常顯示。

function SpotLight(){
                light = new THREE.SpotLight( '#ffffff' ,1);
                light.castShadow = true;
                light.distance = 50; 
                light.angle = 0.6; 
                light.decay = 2;
                light.penumbra = 0.2;          
                light.position.set( 3, 2, 1 );
                light.shadow.camera.near = 1;
                light.shadow.camera.far = 3;
                light.shadow.camera.visible = true;            
                light.shadow.mapSize.width = 1024;
                light.shadow.mapSize.height = 1024;                                    
                light.target = sp;
                scene.add(light);
            }

     我們還需要一個地板，將陰影投射到我們的地板上，這樣才能看到陰影。而之前我們講到過receiveShadow這個屬性。假設我們創建了一個添加了材質的圖形sp。我們需要使用sp.receiveShadow=true來讓其可以接收陰影。如果設置為false，會出現什么情況呢？

並沒有生成陰影。那如果我們設置為true，會是什么樣呢？

       可以看到，已經生成了陰影。所以，如果我們要讓一個物體可以產生陰影，需要設置castShadow這個屬性為true，而生成了陰影，總需要投射到某個物體上，才能被觀察到。所以，接收投影需要將receiveShadow這個屬性設置為true。

       完整的效果如下

       以下是完整代碼。其中庫文件以及3dmax的素材文件這里不提供，需要自己生成或者自己下載。也可以只學習陰影的生成方法。代碼編寫略倉促，不過除了各種事件的控制等，其他方面應該還是比較清晰的。歡迎批評之爭。

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
            }
            
            body {
                margin: 0;
            }
            
            canvas {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>

        <script src="js/three.min.js"></script>        
        <script src="js/jquery-1.12.4.js"></script>
        <script src="js/OBJLoader.js"></script>
        <script src="js/MTLLoader.js"></script> 
        <script src="js/DDSLoader.js"></script>       
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.z = 6;
            camera.position.y = 1;
            camera.position.x = 2;
            camera.lookAt(new THREE.Vector3(0, 0, 0)); 

            var other = new THREE.Object3D();
            other.add(camera);           
            scene.add(other);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            var geometry = new THREE.BoxGeometry(1,1,1);
            var material = new THREE.MeshPhongMaterial({
                color : '#2194ce',
                specular : '#111111',
                specular : 10                                               
            });
            var sp = new THREE.Mesh(geometry,material);
            sp.position.z = -0.5;

            var geometry = new THREE.ConeGeometry( 0.5, 1, 6 );
            var material2 = new THREE.MeshPhongMaterial({
                color : '#2194ce',
                specular : '#ffffff',
                shininess : 100               
            });
            var sp2 = new THREE.Mesh(geometry,material2);
            sp2.position.x = -2.5;
            sp2.position.z = -1;   

            var ball = new THREE.SphereGeometry( 0.5, 32, 32 ); 
            var material3 = new THREE.MeshPhongMaterial({
                color : '#2194ce',
                specular : '#111111',
                shininess : 100               
            });      
            var myBall = new THREE.Mesh(ball,material3);
            myBall.position.z = 1;
            myBall.position.x = -1;
            myBall.position.y = -1;
            myBall.castShadow = true;
            myBall.receiveShadow = true;   

            var light2 = new THREE.SpotLight( '#ffffff' ,1);
            light2.castShadow = true;
            light2.distance = 50; 
            light2.angle = 0.3; 
            light2.decay = 2;
            light2.penumbra = 0.2;          
            light2.position.set( -2, 5, -2 );
            light2.shadow.camera.near = 1;
            light2.shadow.camera.far = 3;
            light2.shadow.camera.visible = true;            
            light2.shadow.mapSize.width = 1024;
            light2.shadow.mapSize.height = 1024;                                    
            light2.target = sp;
            scene.add(light2);
            lightHelper2 = new THREE.SpotLightHelper(light2);
            scene.add(lightHelper2);

            renderer.shadowMap.enabled = true;
            
            var matFloor = new THREE.MeshPhongMaterial( { color:0x808080 } );            
            var geoFloor = new THREE.BoxGeometry( 200, 0.1, 200 );
            var mshFloor = new THREE.Mesh( geoFloor, matFloor );
            var ambient = new THREE.AmbientLight( 0x111111);    
            var lightHelper;        

            var light;
            SpotLight();
            lightHelper = new THREE.SpotLightHelper( light );

            sp.castShadow = true;
            sp.receiveShadow = true;
            sp2.castShadow = true;
            sp2.receiveShadow = true;
            mshFloor.castShadow = true;
            mshFloor.receiveShadow = true;
            mshFloor.position.set( 0, -2, 0 );
            

            scene.add( mshFloor );
            scene.add(sp);
            scene.add(sp2);
            scene.add(myBall);
            scene.add( light );
            scene.add(ambient);
            scene.add(lightHelper);            
           // 0.9854        
            
            //聚光燈光源
           function SpotLight(){
                light = new THREE.SpotLight( '#ffffff' ,1);
                light.castShadow = true;
                light.distance = 50; 
                light.angle = 0.6; 
                light.decay = 2;
                light.penumbra = 0.2;          
                light.position.set( 3, 2, 1 );
                light.shadow.camera.near = 1;
                light.shadow.camera.far = 3;
                light.shadow.camera.visible = true;            
                light.shadow.mapSize.width = 1024;
                light.shadow.mapSize.height = 1024;                                    
                light.target = sp;
                scene.add(light);
            }

            //點光源
            function PointLight(){
                light = new THREE.PointLight('#ffffff',1,50,2);
                    light.castShadow = true;
                    light.position.set( 3, 2, 1 );           
                    light.shadow.mapSize.width = 1024;
                    light.shadow.mapSize.height = 1024;  
                    scene.add(light);                    
            }

            //平行光
            function DirectLight(){
                light = new THREE.DirectionalLight('#ffffff',1);
                    light.castShadow = true;
                    light.position.set( 3, 2, 1 ); 
                    light.decay = 2;
                    light.penumbra = 0.2;          
                    light.shadow.mapSize.width = 1024;
                    light.shadow.mapSize.height = 1024;  
                    scene.add(light); 
            }

            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 ) { };
                THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath( './' );       //設置我們需要加載的mtl文件路徑
                mtlLoader.load( 'lyn.mtl', function( material ) {      //這里加載我們需要的文件名  
                    material.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( material );      //材質，也可自定義
                    objLoader.setPath( './' );               //設置要加載的obj文件的路徑
                    objLoader.load( 'lyn.obj', function ( object ) {           //加載obj文件
                        object.position.z = 1;         //這里設置我們的素材相對於原來的大小以及旋轉縮放等
                        object.position.y = -0.5;
                        object.scale.x = 0.2;
                        object.scale.y = 0.2;
                        object.scale.z = 0.2;
                        object1 = object;               //這里是對素材設置陰影的操作
                        for(var k in object.children){  //由於我們的素材並不是看上去的一個整體，所以需要進行迭代
                                                        //對其中的所有孩子都設置接收陰影以及投射陰影
                                                        //才能看到陰影效果
                            object.children[k].castShadow = true;   //設置該對象可以產生陰影
                            object.children[k].receiveShadow = true;  //設置該對象可以接收陰影
                        }
                        scene.add( object1 );
                        
                    }, onProgress, onError );
                });


            var render = function() {
                requestAnimationFrame(render);
                lightHelper.update();
                                      
                other.rotation.y += 0.01;
                sp2.rotation.x += 0.01;

                renderer.render(scene, camera);
            }
            
            render();
            
            //設置場景不停旋轉
            var tmp = 0;
            var timer = setInterval(function(){
                if(tmp == 0){
                    var route = (5 - light.position.y) / 50;
                    light.position.y += route;
                    if(route <= 0.001){
                        tmp = 1;
                    }
                }else{
                    var route = (light.position.y - 1) / 50;
                    light.position.y -= route;
                    if(route <= 0.001){
                        tmp = 0;
                    }
                }
            },15);

           //設置圖中的立方體可以旋轉
            var left = false;
            var right = false;
            var boxLeft = false;
            var boxRight = false;
            var boxUp = false;
            var boxDown = false;
            var object1 = '';                        
            setInterval(function(){                
                if(left){                                                            
                    object1.rotation.y -= 0.02;                  
                }else if(right){                                        
                    object1.rotation.y += 0.02;            
                }else if(boxLeft){
                    sp.rotation.y -= 0.02;
                }else if(boxRight){
                    sp.rotation.y += 0.02;
                }else if(boxUp){
                    sp.rotation.x -= 0.02;
                }else if(boxDown){
                    sp.rotation.x += 0.02;
                }
            },25);

            document.onkeydown = function(ev){
                var ev = ev || event;
                if(ev.keyCode == 65)
                    left = true;
                else if(ev.keyCode == 68)
                    right = true;   
                else if(ev.keyCode == 37)
                    boxLeft = true;
                else if(ev.keyCode == 38)
                    boxUp = true;
                else if(ev.keyCode == 39)
                    boxRight = true;
                else if(ev.keyCode == 40)
                    boxDown = true; 
                else if(ev.keyCode == 80){
                    scene.remove(light);
                    PointLight();
                }else if(ev.keyCode == 83){
                    scene.remove(light);
                    SpotLight();
                }else if(ev.keyCode == 17){
                    scene.remove(light);
                    DirectLight();
                }else if(ev.keyCode == 90){
                    if(light.intensity < 10)
                        light.intensity += 1;
                }else if(ev.keyCode == 88){
                    if(light.intensity > 0)
                        light.intensity -= 1;
                }else if(ev.keyCode == 67){
                    scene.remove(sp);
                    geometry = new THREE.BoxGeometry(1,1,1);
                    material = new THREE.MeshPhongMaterial({
                        color : '#A44A32',
                        specular : '#ffffff',
                        specular : 100                                               
                    });
                    var sp = new THREE.Mesh(geometry,material);
                    sp.position.z = -0.5;
                    scene.add(sp);
                }else if(ev.keyCode == 86){
                    scene.remove(sp);
                    geometry = new THREE.BoxGeometry(1,1,1);
                    material = new THREE.MeshPhongMaterial({
                        color : '#2194ce',
                        specular : '#111111',
                        specular : 100                                               
                    });
                    var sp = new THREE.Mesh(geometry,material);
                    sp.position.z = -0.5;
                    scene.add(sp);
                }     
            }

            document.onkeyup = function(ev){
                var ev = ev || event;
                if(ev.keyCode == 65)
                    left = false;
                else if(ev.keyCode == 68)
                    right = false;
                else if(ev.keyCode == 37)
                    boxLeft = false;
                else if(ev.keyCode == 38)
                    boxUp = false;
                else if(ev.keyCode == 39)
                    boxRight = false;
                else if(ev.keyCode == 40)
                    boxDown = false; 
            }


        </script>
    </body>
</html>