在three.js中渲染具有部分透明纹理的平面阴影答案

【问题标题】：Rendering shadows from plane with partially transparent texture in three.js在three.js中渲染具有部分透明纹理的平面阴影
【发布时间】：2019-03-14 07:47:42
【问题描述】：

我正在尝试使用最新版本的 three.js (r102) 渲染阴影，但我不确定我做错了什么。我正在使用 MeshPhongMaterial 和 castShadow 并在所有相关网格上设置 receiveShadow，以及朝向场景内容的定向光。有人可以看看这个并帮助我弄清楚如何让这些阴影工作吗？谢谢！

现场演示（在菜单中切换阴影）： https://argonjs.github.io/three-web-layer/

来源： https://github.com/argonjs/three-web-layer

【问题讨论】：

支持您的问题，因为 OSS 项目很酷。但是如果你问我，三层 web-layer.ts 需要一些清理。不过，作为初稿，它令人印象深刻。
感谢您的反馈！我上周刚把它放在一起，所以这绝对是初稿。你在想什么样的清理？
@spiegg three-web-layer.ts 是一个长的类，大约有 1k 行，在构造函数中发生了很多事情。至少，我会将它分成 2-3 个类，每个类相互扩展。

标签： three.js

【解决方案1】：

如果您在 WebLayer3D 前面添加一个小立方体，它会正确地在渲染的 DOM 层上投射阴影：

//in app.ts just after light with shadow camera:
let geometryBox = new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 )
let materialRed = new THREE.MeshPhongMaterial( {color: 0xff0000} )
let cubeSmall = new THREE.Mesh( geometryBox, materialRed )
cubeSmall.position.set( 0.1, -0.03, 0.1 )
cubeSmall.castShadow = true
cubeSmall.receiveShadow = true
scene.add( cubeSmall )

因此，只有 WebLayer3D 生成的平面不会投射阴影，场景/相机/灯光的设置是正确的。

更新：下面的解释不是原因，在另一个答案中查看material.shadowSide的解决方案。

如果您查看three.js 领域中的对象树（即遍历children[]），以todoLayer 开头-其中很多将castShadow 设置为“false”。您将不得不在这里重新考虑您的策略。另请注意，父 Object3D 上的 castShadow=false 会为子对象关闭它。

【讨论】：

感谢您的提示！我做了更多调查，并弄清楚了（不明显）。顺便说一句，对象层次结构中的某些网格故意未设置为投射阴影（光标网格）。此外，您似乎对castShadow=false 影响子对象的看法不正确。

【解决方案2】：

我在亚历克斯的提示下想通了（感谢亚历克斯！）。

基本上，尽管看起来很奇怪，但 three.js 中的平面不会投射阴影，除非它是双面的（更新：或者除非 material.shadowSide 设置为 THREE.FrontSide）。一旦我在平面材质上设置了THREE.DoubleSide，它就会按预期工作。基本上，要让纹理平面投射阴影，需要以下条件（从 three.js r102 开始）：

  var mesh = new THREE.Mesh(
    new THREE.PlaneGeometry(1,1,2,2), 
    new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide, // important!
      alphaTest: 0.1,
  })
  mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
    map: texture
    depthPacking: THREE.RGBADepthPacking,
    alphaTest: 0.1
  })

我还必须调整灯光的阴影偏差以消除伪影。

【讨论】：

(1) 对于您的单面平面，您可以选择设置material.shadowSide = THREE.FrontSide;。 (2) 阴影bias 位于规范化设备空间中，不受场景单元规模的影响。
啊，感谢您解释阴影偏差！很高兴知道shadowSide.. 虽然我希望THREE.FrontSide 是默认值:)
在three.js中，默认情况下背面会投射阴影。这是为了帮助防止自阴影伪影。