Threejs之 .obj 模型投影

今天做项目的时候发现threejs中.obj模型投影与geometry的投影有一点不同,写个文章记录一下,防止忘记,也希望能够帮到大家!
如果对你的问题产生了帮助,就请点个赞吧 ^_^ ~

原理:
.obj 模型投影的方法是通过遍历 obj.children 中的元素,并给他们设置:castShadowreceiveShadow;

核心代码:

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对象上设置castShadowreceiveShadow,而.obj对象是由许多个Mesh组成,都在obj.children中,因此需要遍历obj.children来添加阴影效果。

看一下最终效果:

Threejs之 .obj 模型投影

相关推荐