如何在场景中添加适当的灯光？

Question

在我的项目中，我添加了几个模型和其他几何对象，我可以移动相机在场景中进行扫描，但是当我添加如下灯光时，模型并没有按原样显示。我应该如何添加合适的灯光才能很好地适应场景中的模型。

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff,2);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

 var directionalLight1 = new THREE.DirectionalLight(0xffffff);
directionalLight1.position.set(-1, -1, -1).normalize();
scene.add(directionalLight1);

Answer 1

这将是一些非常暗的环境光。我会推荐一个更高的值，接近 0x555555 或更高。此外，您正在将定向光添加到场景中，但您将定向光的位置设置为非常接近场景的原点。

您看到directionalLight.position 是一个THREE.Vector3 对象，并且您正在调用向量对象的 .set() 方法，然后简单地将结果标准化。你的物体比一个单位大吗？它在原点吗？如果是这样，我打赌你的定向光在你的物体内。仅使用环境照明，3D 模型看起来并不正确。相反，我建议你这样做：

        var originVector = new THREE.Vector3(0,0,0);
        var ambLight = new THREE.AmbientLight(0x555555);
        scene.add(ambLight);

        var dirLight = new THREE.DirectionalLight(0xFFFFFF);
        dirLight.position.x = -200;
        dirLight.position.y = 200;
        dirLight.position.z = 150;
        dirLight.lookAt(originVector);
        scene.add(dirLight);

如果您需要阴影，请参考我之前回答过的关于 Enabling Shadows in Three.JS 的问题。这是我不久前制作的一个演示，它应该向您展示上述照明代码的结果：Lighting Cube Acceleration Demo。