今天做项目的时候发现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来添加阴影效果。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。