javascript - 三.js 阴影投射麻烦

Question

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

这是示例：

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

有什么建议吗？

谢谢！

score 3 · Accepted Answer

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

然后你必须激活 shadow ：

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

score 2 · Accepted Answer

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

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

controls = new THREE.OrbitControls( camera );

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

controls.update();

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

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

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

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

此外，如果需要，可以减小阴影截头体的大小。

2 回答 2