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 来添加阴影效果。

看一下最终效果：