在 Three.js 中的 MeshPhongMaterial 或 MeshLambertMaterial 上投射阴影答案

【问题标题】：Casting shadow on MeshPhongMaterial or MeshLambertMaterial in Three.js在 Three.js 中的 MeshPhongMaterial 或 MeshLambertMaterial 上投射阴影
【发布时间】：2014-09-04 19:47:42
【问题描述】：

我觉得我在这里遗漏了一些简单的东西。

我使用了JSFiddle by @WestLangley，它演示了如何将阴影从物体投射到平面上。

当平面只填充颜色时，一切都按预期工作：

var groundMaterial = new THREE.MeshLambertMaterial({
  color: 0xFF0000
});

然后我将其改为使用纹理：

var groundMaterial = new THREE.MeshLambertMaterial({
  // color: 0xFF0000,
  map: texture
});

..突然间，影子消失了：

MeshPhongMaterial 和 MeshLambertMaterial 都会出现这种情况。

请注意，相机位置和阴影配置均未更改。一切都保持不变，但阴影消失了。

应该“告诉”纹理接收光线还是这是别的什么？

在 r61、r66、r67 上测试。

【问题讨论】：

嗯，我刚刚点击了你的小提琴链接，对我来说，阴影确实有效.....*scratchesHead*
我可以使用 Chrome 35.0.1916.153 在 OSX 10.9.4 上复制该问题。与 Safari 兼容。
呃，我什至没想过要签入另一个浏览器！确实可以在 Safari 中使用。在 Chrome 37.0.2062.3 dev 和 FF nightly (33.0a1) 中失败。我在 OSX 10.9.4 上。有趣...
在 ChromeOS 35.0.1916.155 上运行良好。
现在是v81，解决了吗？我在 Chrome 中遇到了同样的问题 - 在这个小提琴和我自己的项目中

标签： three.js textures shadow

【解决方案1】：

这是一个相当古老的问题，但为了提供一些结论，我想指出存在此问题的版本已经修复。小提琴使用了 Three.js r66，但最新的（撰写本文时为 r107）不再有这个问题：

【讨论】：