在Three.js中给MeshPhongMaterial或MeshLambertMaterial投射阴影

Question

我觉得我在这里错过了一些简单的东西。

我使用由@WestLangley提供的JSFiddle，演示如何从对象投射阴影到平面。

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

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

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

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

突然间，阴影消失了：

这种情况发生在MeshPhongMaterial和MeshLambertMaterial两者之间。 请注意，相机位置和阴影配置均未更改。一切保持不变，但阴影消失了。 纹理是否应该“告知”接收光线，还是有其他原因？ 在r61、r66、r67上进行了测试。

- kangax

---

嗯，我刚刚点击了你的Fiddle链接，对我来说，阴影确实起作用了... 挠头 - GuyGood

我可以在OSX 10.9.4版本的Chrome 35.0.1916.153上重现这个问题，但在Safari上运行良好。 - WestLangley

哎呀，我甚至没有想到在另一个浏览器中检查一下！在Safari中可以工作。在Chrome 37.0.2062.3 dev和FF nightly（33.0a1）中失败。我使用的是OSX 10.9.4。有趣... - kangax

在ChromeOS 35.0.1916.155上运行良好。 - mrdoob

现在已经是v81版本了，这个问题解决了吗？我在Chrome中遇到了同样的问题 - 在这个fiddle和我的项目中也是如此。 - EJW

Answer 1

这是一个相当古老的问题，但为了提供一些解决方法，我想指出，此问题的版本已经得到修复。该示例中使用的Three.js版本为r66，但最新版本（截至撰写本文时为r107）已不再存在此问题：

- M -