Three.js - 盒子四周的方向灯？

Question

我有一个用户自定义的3D框，可以使用Three.js旋转/旋转轨道控制。功能正在按预期工作，但是，由于用户需要查看我正在使用Ambient灯设置的自定义框颜色，因此很难获得正确的照明：

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

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

如果我将Ambient灯设置为示例中显示的默认值，我会获得更多的深度/清晰度，但由于光线不同而失去颜色：

这导致我尝试定向灯，目标是我可以为顶部，底部和侧面设置方向灯。但是，我对如何实现这一点很困惑，所以我可以在各方面都有灯光。深度/锐度看起来很棒，但我不知道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);

顶部和两侧的灯亮：

但不是其他方面和底部：

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

更新：在这里使用帖子，因为我使用的是orbitcontrols，所以我可以继续关注。 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