Three.js

Question

我有一个用户自定义的 3D 盒子，可以 rotate/spin 使用 Three.js 与轨道控制。该功能按预期工作，但是，照明很难正确，因为用户需要看到他们自定义的盒子颜色，我正在使用以下设置的环境光：

var light = new THREE.AmbientLight(0xffffff); // White light
scene.add(light);

环境光的问题在于，虽然它似乎保留了用户选择的颜色，但 depth/sharpness 丢失了，因为框显示为已打开，用户希望看到深度：

如果我将环境光设置为示例中显示的默认值，我会得到更多 depth/sharpness 但由于光线不同而失去颜色：

这促使我尝试定向灯，目标是在顶部、底部和侧面设置定向灯。但是，我对如何实现这一点感到困惑，这样我才能在所有方面都有灯光。 depth/sharpness 看起来不错，但我不知道 position.set(0,0,0) 的坐标代表什么。我怀疑它是 x,y,z。使用下面的代码，我可以覆盖一些盒子，但不是全部。我需要它像 Ambient 一样全部点亮，但具有使用定向的深度。这是我当前的代码：

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight2.position.set(1, 0, 0);
scene.add(directionalLight2);

var directionalLight3 = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight3.position.set(0, 0, 1);
scene.add(directionalLight3);

哪个灯的顶部和两侧都很好：

但不是另一边和底部：

是否可以为我的盒子的每一侧、顶部和底部设置方向灯？如果是这样，我需要做什么？是否需要添加更多具有不同坐标的灯？更新：

更新： 在这里使用 post，因为我使用的是轨道控制，所以我可以让光线跟随。 three.js directional light folllowing camera

这给了我这个：

唯一的问题是，在第一次加载时，它是全黑的，直到用户进行交互。关于如何更改此行为以在加载时显示颜色的任何想法？

Answer 1

如果您想要与 OrbitControls 或 TrackballControls 配合使用的均匀照明，您可以使用此模式：

// light
var light = new THREE.PointLight( 0xffffff, 0.9 );
camera.add( light );

当您将灯光添加为相机的子项时，您必须记住将相机添加为场景的子项：

scene.add( camera );

如果您使用此模式，您的场景中不需要任何其他灯光。

three.js r.73

Three.js - 盒子所有侧面的方向灯？

Three.js - Directional lights for all sides of a box?

3d