1. 在 three.js 開(kāi)發(fā)中毅待,發(fā)現(xiàn)模型從上面看是正常顯示蔬充,從下面向上看就消失了绽乔,通過(guò)查找是 .side
屬性影響,代碼如下:
new FBXLoader().load("xxx.fbx", (object) => {
object.traverse((child) => {
// 模型轉(zhuǎn)到一定角度消失 DoubleSide 解決
if (child.material) {
child.material.side = THREE.DoubleSide;
}
});
})
.side
有三種欣喧, FrontSide
(正面) 、BackSide
(反面)梯找、DoubleSide
(雙面).
2. 條紋陰影問(wèn)題
上面設(shè)置完之后唆阿,發(fā)現(xiàn)模型上出現(xiàn)條紋陰影,如圖:
有三種解決方案:
1:將模型的
receiveShadow
屬性設(shè)置為 false
, receiveShadow = false
锈锤, 這樣設(shè)置的效果是此物體不接收陰影驯鳖,我的問(wèn)題是這樣解決的,物體的陰影是由光線的 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
去掉浅辙,但是我們想要的效果就沒(méi)了。
3: 設(shè)置物體的投影面背面:
new THREE.MeshPhysicalMaterial( { color: color, side: THREE.DoubleSide, shadowSide: THREE.BackSide } );
附上文檔截圖: