当前位置: 首页 > Web前端 > JavaScript

three.js中出现条纹阴影和网格阴影解决方法

时间:2023-03-27 10:23:59 JavaScript

ThreeJS启用阴影正确方式:渲染器启用阴影true;地面有阴影obj.receiveShadow=true;noshadoweffect:有阴影效果,导致条纹多:原因是设置了四个方块不接收阴影obj.receiveShadow=false;条纹可以避免,但没有四个方块的投影效果。设置material.side=0;材料的侧面属性为0也可以正常工作。或者将材质的投影面设置为背面也可以解决material.shadowSide=THREE.BackSide;正确的阴影效果:以上是生成条纹阴影的解决方法。但是,模型上有网格阴影或者投射的阴影模糊:阴影不够精细,导致投射到自己或其他五位拥护者身上出现锯齿状阴影。解决方案:light.shadow.mapSize.width=2048;//阴影贴图的宽度设置为2048像素light.shadow.mapSize.height=2048;//阴影贴图的高度设置为2048像素(light是你自己定义的castableshadowlight)值的大小可以根据实际情况设置。越小性能越好,越大效果越好,但是会占用更多的图像计算资源。多于。