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

Question

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

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

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

标签： three.js

Answer 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”。您将不得不在这里重新考虑您的策略。另请注意，castShadow=false在父 Object3D 上为子级将其关闭。