Threejs之 .obj 模型投影

今天作項目的時候發現threejs中.obj模型投影與geometry的投影有一點不一樣，寫個文章記錄一下，防止忘記，也但願可以幫到你們！
若是對你的問題產生了幫助，就請點個贊吧 ^_^ ~

原理：
.obj 模型投影的方法是經過遍歷 obj.children 中的元素，並給他們設置： castShadow 和 receiveShadow;

核心代碼：

for(k in obj.children){
        obj.children[k].castShadow = true;
        obj.children[k].receiveShadow = true;
     }

建立模型的完整代碼：

// 生成汽車模型    
    function initCar(){
      var geometry, material;
      var loader = new THREE.MTLLoader();
      loader.setPath('../3d-models/');
      loader.load('car.mtl', function(material){
        material.preload();

        let objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(material);
        objLoader.load('../3d-models/car.obj', function(obj){

          for(k in obj.children){
            obj.children[k].castShadow = true;
            obj.children[k].receiveShadow = true;
          }
          // obj.receiveShadow = true;      // 這種方式沒有效果，只適用於 geometry 模型
          // obj.castShadow = true;         // 這種方式沒有效果，只適用於 geometry 模型

          scene.add(obj);
        })
      })
    }

geometry投影模型投影的代碼：（你們自行與.obj代碼對比一下）

function initCube(){
      var geometry = new THREE.BoxGeometry(20, 20, 20);
      var material = new THREE.MeshPhongMaterial({ color: 0xff3300 });
      cube = new THREE.Mesh(geometry, material);

      cube.receiveShadow = true;        // 對比.obj
      cube.castShadow = true;           // 對比.obj

      scene.add(cube)
    }

仔細分析一下：

其實說白了，當給模型添加陰影的時候，是在Mesh對象上設置castShadow 和 receiveShadow，而.obj對象是由許多個Mesh組成,都在obj.children中，所以須要遍歷obj.children來添加陰影效果。

看一下最終效果：