灯光问题（使用three.js）答案

【问题标题】：Problems with lights (using three.js)灯光问题（使用three.js）
【发布时间】：2012-09-04 23:34:59
【问题描述】：

我有一个从搅拌机导出的简单室内场景。它有一个房间，天花板上有 3 个球体，里面有各自的光源。每个灯都可以单独工作，但是当我将它们全部插入场景时，只有一个灯可以工作！有时与 2 一起工作，但从不与他们三个一起工作。这是我的灯代码：

luz_sala1 = new THREE.PointLight(0xFFFFFF,0.5, 50.0);
luz_sala1.position = new THREE.Vector3(16.14323,2.52331,13.93375);
scene.add(luz_sala1);

luz_sala2 = new THREE.PointLight(0xFFFFFF, 0.5, 50.0);
luz_sala2.position = new THREE.Vector3(27.70114,2.52331,-6.20571);
scene.add(luz_sala2);

luz_sala3 = new THREE.PointLight(0xFFFFFF, 0.5, 50.0);
luz_sala3.position = new THREE.Vector3(21.50580,3.10719,-27.82775);
scene.add(luz_sala3);

如果我将距离设置为 0，效果会很好，但我需要这些灯光只影响它们所在的区域。我也尝试过 THREE.Spotlight(0xFFFFFF,0.5,50.0,Math.PI, 0) 但结果相同。当它们以某种方式共享相同的距离时，它们看起来会相互抵消吗？

请帮忙，这很混乱。

编辑：另外，我在房间的另一部分有一些聚光灯模型（我有大约 4 个），但是当我将这 4 个聚光灯添加到场景中时，我遇到了着色器编译错误。搜索完问题，发现需要在渲染器中设置maxLights属性。我将它设置为 10，但问题仍然存在，场景中的灯光不能超过 4 个。还有什么我可以做的吗？

编辑 2：这里有一些图片。作为参考，“luz_sala1”是靠近电视的，“luz_sala2”是中间的，“luz_sala3”是更远的。

这个是上面的代码（所有 3 个灯），除了 0.8 强度。 http://www.mediafire.com/view/?s85qr4rplhort29

这是在打开 2 和 3 的情况下（注释“scene.add(luz_sala1);”）： http://www.mediafire.com/view/?83qbbua9f8ee3b4

所以，如您所见，2 个点光源可以很好地协同工作，但 3 个点光源似乎“加起来”到第一个？

【问题讨论】：

我在两台机器上试过，一台是 Windows 7 和 ATI HD5850，另一台是 Windows XP（不记得卡），两台机器都发生了同样的事情。我可以尝试上传它，但是代码很大。我会尽快发布一些图片。
发布了 2 张图片。如果灯光是 Spotlights 而不是 PointLights，也会发生同样的事情。

标签： javascript three.js

【解决方案1】：

maxLight 属性没有任何影响很可能是由于您的硬件、驱动程序或 ANGLE（将 WebGL 转换为 Direct3D 的库）在着色器中不支持足够多的可变向量 - 每个灯光也需要一个和其他的东西。这可能也是您的一般问题的背景。

为了有更多的灯，有三种选择：

如果您让浏览器更喜欢原生 OpenGL 而不是 ANGLE（Google 获取说明），请尝试是否有帮助。但请确保您安装了最新的 OpenGL 驱动程序。
实现延迟渲染器。这在当今桌面世界中非常普遍，但由于帧缓冲区的限制，在 WebGL 中以良好的性能实现即使不是不可能也很棘手。
实现只使用某些灯光的灯光管理器，禁用其余灯光。最简单但远非完美的方法是选择离相机最近的灯光。

另外值得一提的是，目前 SpotLights 只是将阴影投射到一个方向的 PointLights。

【讨论】：