javascript - Three.js 中使用 ShaderMaterial 更改顶点位置的阴影贴图问题

Question

在我的项目中，我使用 ShaderMaterial 来渲染地形。根据高度图纹理在顶点着色器中修改顶点位置:

vec4 mvPosition = modelViewMatrix * vec4( position + normal * heightMapScale, 1.0);
gl_Position = projectionMatrix * mvPosition;

地形看起来不错，但当我尝试在其上添加对象时，阴影很奇怪。似乎顶点不知道它们的新位置:(

请访问以下链接获取屏幕截图和现场演示(抱歉，我没有足够的声誉在此发布图像)

截图:/image/Xw3ZI.jpg

现场演示:http://jsfiddle.net/b2bfm8q3/2/

您可以看到左侧的立方体具有正确的阴影，而右侧的立方体则没有，因为面在着色器中向上移动。

有办法解决这个问题吗？

谢谢

Answer 1

@gman，谢谢您的建议!事实上，应该修改更多着色器。对于我的问题，worldpos_vertex 中的 worldPosition 变量也应该更新:

// move the vertex position
"float fBump = position.x < 0. ? 0. : 350.;",
"vec4 newPosition = vec4( position + normal * fBump, 1.0);",
// to replace THREE.ShaderChunk[ "default_vertex" ]
"vec4 mvPosition = modelViewMatrix * newPosition;",
"gl_Position = projectionMatrix * mvPosition;",
// to replace THREE.ShaderChunk[ "worldpos_vertex" ]
"vec4 worldPosition = modelMatrix * newPosition;",

此处更新了演示:http://jsfiddle.net/b2bfm8q3/4/