三.js 阴影投射麻烦答案

【问题标题】：Three.js shadow casting trouble三.js 阴影投射麻烦
【发布时间】：2012-09-28 08:40:22
【问题描述】：

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

示例如下：

我想要一盏灯，它位于盒子内并像太阳一样投射阴影。我使用点光源是因为我在某处读到必须使用正交相机作为定向光源来投射阴影？

有什么建议吗？

谢谢！

【问题讨论】：

【解决方案1】：

首先，只有 DirectionalLight 和 SpotLight 可以投射阴影。

然后你必须激活影子：

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

【讨论】：

【解决方案2】：

您有一些控制台错误需要解决，但您的 spotlight 基本上可以正常工作。

首先，添加一个相机控制器，以便您可以旋转视图并查看发生了什么：

controls = new THREE.OrbitControls( camera );

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

controls.update();

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

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

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

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

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

【讨论】：