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

ThreeJS 开启阴影正确做法:

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

无阴影效果:
three.js中出现条纹阴影和网格阴影解决办法_第1张图片

有阴影效果,产生了许多条纹:
three.js中出现条纹阴影和网格阴影解决办法_第2张图片

产生原因

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

正确阴影效果:
three.js中出现条纹阴影和网格阴影解决办法_第3张图片

以上为产生条纹阴影解决办法。

而模型上出现了网格阴影或投射出的阴影比较模糊:
three.js中出现条纹阴影和网格阴影解决办法_第4张图片 three.js中出现条纹阴影和网格阴影解决办法_第5张图片

则是阴影不够精细导致投射在自身或其他五提倡的阴影出现锯齿,解决办法:
light.shadow.mapSize.width=2048; //阴影贴图宽度设置为2048像素
light.shadow.mapSize.height=2048; //阴影贴图高度设置为2048像素
(light为你自己定义的可投射阴影灯光)

值的大小可以自己跟据实际情况设置,设置得小一点性能会更加好,设置得大一点效果会更好,不过会占用更多的图像运算资源。

以上。

你可能感兴趣的:(three.js中出现条纹阴影和网格阴影解决办法)