Three.js 场景过暗

Question

如果你通过 Three.js 创建一个三维场景或者加载一个 stl、obj、fbx 等三维模型，可能会遇到整个场景非常暗情况，这一般和场景中的光源有关，如果光源强度过大，场景会太亮，如果光源强度过小，场景自然太暗。

光源设置

关于 Three.js 光源的设置，这里不详细解析，只简单说下思路，具体可以参考 Threejs 视频教程第5张的光照对象介绍。

Three.js 提供了点光源 PointLight、平行光 DirectionalLight、环境光 AmbientLight 等光源对象。如果整个场景太暗，可以通过提高场景中光源对象的强度，或者增加场景中光源的数量，如果整个场景太亮，可以降低场景中光源的强度或者降低场景中光源的数量。

整体明暗调节

如果想整体调整场景的明暗，可以通过设置环境光环境光 AmbientLight 来实现，环境光是没有方向的，一个网格模型模型无论任何方向的一个面，都会随着环境光强度的变化而变化

特定面明暗

如果你向调整模型某个角度表面的明暗，需要设置有方向的光源对象，比如点光源、平行光或聚光源，通过改变光源的位置或方向来设置。

比如通过点光源 PointLight 的位置属性 .position 可以设置点光源位于一个模型的不同位置，网格模型正对着光源的外表面肯定更亮，对于平行光 DirectionalLight 和聚光源而言需要设置光源的位置和照射的位置目标。

外部模型

不同格式的外部模型包含的光源信息是不同的，比如 stl、ply、obj 等格式的三维模型文件是不包含光源对象的，当你通过 Three.js 的加载器加载这些不包含光源信息模型的时候需要你手动插入一些光源对象，如果是 FBX、GLTF 等格式三维模型文件，这些模型文件是可以包含光源信息的，至于这些模型文件有没有光源信息，那要看你或3D美术有没有在场景中设置光源，如果没有在3dmax等建模软件中设置光源，你导出 fbx 等格式的时候，文件中也不会有光源信息。不同的三维模型文件格式，都是不同的规范标准，规定了该格式文件可以包含的信息。