码迷,mamicode.com
首页 > Web开发 > 详细

ThreeJS 阴影条纹BUG

时间:2020-01-16 10:35:48      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:inf   ble   原因   sid   shp   amber   code   灯光   shadow   

ThreeJS 开启阴影正确做法:

1. 渲染器启用阴影 renderer.shadowMap.enabled = true;
2. 灯光产生阴影 light.castShadow = true;
3. 物体遮挡阴影 obj.castShadow = true;
4. 地面显示阴影 obj.receiveShadow = true;

无阴影效果

技术图片

有阴影效果,产生了许多条纹

技术图片

产生原因

1. 将四方块设置为 不接收阴影 obj.receiveShadow = false; 可避免条纹,但四方块上就没有投影效果了。
2. 将材质的 let material = new THREE.MeshLambertMaterial( { color: color, side: THREE.DoubleSide } ); side属性去掉也可以正常。
3. 或者将材质的投影面设置为背面也可解决 let material = new THREE.MeshPhysicalMaterial( { color: color, side: THREE.DoubleSide, shadowSide: THREE.BackSide } );

正确阴影效果

技术图片

总结:

材质的 sideshadowSide 设置对阴影产生影响,需特别注意;

技术图片

ThreeJS 阴影条纹BUG

标签:inf   ble   原因   sid   shp   amber   code   灯光   shadow   

原文地址:https://www.cnblogs.com/zjfree/p/12199783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!