【问题标题】:Three.js imported obj incorrect shadow rendering三.js导入obj不正确的阴影渲染
【发布时间】:2015-07-27 13:33:44
【问题描述】:

我从搅拌机中导入了一个对象,将它的每个网格设置为投射和接收阴影,但渲染的阴影不正确。我还合并了对象的网格,认为这可以解决问题,但结果是一样的。 使用 side: THREE.DoubleSide 时问题似乎得到了解决,但这会使材质变暗。

灯光设置

light = new THREE.DirectionalLight( 0x666666, 1 );
light.position.set(  2*400, 2*300.75, 2*400);
light.position.multiplyScalar( 1.3 );
light.castShadow=true;
light.shadowMapWidth = 2048;
light.shadowMapHeight =2048;
var d = 1300;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;

light.shadowCameraFar = 10000;
light.shadowBias = 0.0001;
light.shadowDarkness = 0.5;

材料设置

var childTilesTexture = THREE.ImageUtils.loadTexture('texture/wood_t.jpg?v1');
childTilesTexture.wrapS = childTilesTexture.wrapT = THREE.RepeatWrapping;
child.material = new THREE.MeshPhongMaterial( { map:childTilesTexture, shininess:5, metal: false} );

屏幕截图

http://i.stack.imgur.com/bsKnU.jpg

另一个屏幕截图

如您所见,手柄正在通过对象框投射阴影。

http://i.stack.imgur.com/aLMgL.jpg

【问题讨论】:

  • 你能在图片上找出问题所在吗?
  • “渲染的阴影不正确”是什么意思?显示该问题的示例
  • 看看我链接的图片(主要是第一张)。物体背面的阴影应该是完整的,但正如您所见,没有阴影的部分会出现。光在物体的前面,所以它们的背面应该被阴影覆盖。相反,您可以看到有光的部分。
  • 尝试将shadowBias 设置为一个小的负值。
  • @WestLangley:我将它设置为 0.0003 并且效果很好!将其发布为答案,以便其他人可以正确查看:)

标签: javascript three.js shadow .obj


【解决方案1】:

shadowBias 属性可用于解决自阴影问题。尝试改变它。

尝试小的负值和小的正值。

three.js r.71

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-10-24
    • 2023-03-27
    • 2019-01-28
    • 1970-01-01
    • 2013-07-06
    • 1970-01-01
    • 1970-01-01
    • 2017-06-30
    相关资源
    最近更新 更多