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

56次阅读

共计 565 个字符,预计需要花费 2 分钟才能阅读完成。

ThreeJS 开启暗影正确做法:

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

无暗影成果:

有暗影成果,产生了许多条纹:

产生起因

  1. 将四方块设置为 不接管暗影 obj.receiveShadow = false; 可防止条纹,但四方块上就没有投影成果了。
  2. 将材质的 material.side = 0; side 属性设置为 0 也能够失常。
  3. 或者将材质的投影面设置为反面也可解决 material.shadowSide = THREE.BackSide;

正确暗影成果:

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

而模型上呈现了网格暗影或投射出的暗影比拟含糊:

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

值的大小能够本人跟据理论状况设置,设置得小一点性能会更加好,设置得大一点成果会更好,不过会占用更多的图像运算资源。

以上。

正文完
 0