1. 在 three.js 开发中,发现模型从上面看是正常显示,从下面向上看就消失了,通过查找是 .side
属性影响,代码如下:
new FBXLoader().load("xxx.fbx", (object) => {
object.traverse((child) => {
// 模型转到一定角度消失 DoubleSide 解决
if (child.material) {
child.material.side = THREE.DoubleSide;
}
});
})
.side
有三种, FrontSide
(正面) 、BackSide
(反面)、DoubleSide
(双面).
2. 条纹阴影问题
上面设置完之后,发现模型上出现条纹阴影,如图:
条纹阴影.png
有三种解决方案:
1:将模型的
receiveShadow
属性设置为 false
, receiveShadow = false
, 这样设置的效果是此物体不接收阴影,我的问题是这样解决的,物体的阴影是由光线的 shadow
完成,如:
const directionLight = new THREE.DirectionalLight(0xffffff, 1.8);
directionLight.castShadow = true;
directionLight.shadow.camera.left = -300;
directionLight.shadow.camera.right = 300;
directionLight.shadow.camera.top = 300;
directionLight.shadow.camera.bottom = -300;
directionLight.shadow.camera.far = 3500;
directionLight.shadow.bias = -0.0001;
directionLight.shadow.radius = 5;
2: 将上面的 THREE.DoubleSide
去掉,但是我们想要的效果就没了。
3: 设置物体的投影面背面:
new THREE.MeshPhysicalMaterial( { color: color, side: THREE.DoubleSide, shadowSide: THREE.BackSide } );
附上文档截图:
文档截图.png