Three.js影子铸造麻烦

Question

我正在尝试在threejs中创建卡通天气可视化，所以我决定首先建立一个基本的场景，一切都在美好的一天，但我在投射阴影时遇到了麻烦。我在stackoverflow上复制了这里灯光的代码并且示例有效，但是当我在我的项目中使用它时它会失败。

以下是示例：

https://dl.dropbox.com/u/12939276/ImportedScene/index.html

我想要一个装在盒子里面的灯，投下阴影就好像是太阳一样。我使用了一个点光源，因为我读过某个地方，你必须使用正交相机来定向灯来投射阴影？

有什么建议吗？

谢谢！

Answer 1

您有一些需要解决的控制台错误，但您的spotlight基本上正在运作。

首先，添加一个摄像头控制器，以便您可以旋转视图并查看发生的情况：

controls = new THREE.OrbitControls( camera );

然后更新animate函数中的控件：

controls.update();

添加一些轴，以便获得参考框架：

scene.add(new THREE.AxisHelper() );

你会发现你的聚光灯太近了。相反，设置：

light.position.set( 5, 5, -5 );

此外，如果您愿意，可以减小阴影平截头体。

Answer 2

首先，只有DirectionalLight和SpotLight才能投射阴影。

然后你必须激活阴影：

renderer.shadowMapEnabled = true;
directionalLight.castShadow = true;
object3D.castShadow = true;
anOtherObject3D.receiveShadow = true;