第181期：THREEJS中的灯光-CFANZ编程社区

封面图

第181期：THREEJS中的灯光_默认值

想像一下我们正在导演一场电影，灯光在影视中的应用是必不可少的，它的左右有很多：

照明演出,使观众看清演员表演和景物形象;
导引观众视线
塑造人物形象,烘托情感和展现舞台幻觉;
创造剧中需要的空间环境;
渲染剧中气氛
等等

AmbientLight 环境光

环境光。

该灯光在全局范围内均匀地照亮场景中的所有对象。

该灯光不能用于投射阴影，因为它没有方向。

代码示例：

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

其构造器参数如下：

color- 灯光颜色。默认0xffffff.
intensity- 灯光强度。默认 1 。

AmbientLightProbe 环境光探测器

环境光探测器。

光探测器是将光添加到3D场景的一种替代方式。AmbientLightProbe是场景中单个环境光的光估计数据。

与经典光源（例如定向灯、点光源或聚光灯）不同，光探测器不发光。相反，它们存储关于穿过3D空间的光的信息。在渲染过程中，通过使用来自光探测器的数据来近似达到3D对象反光的效果。

光探测器通常由environmentmaps（辐射）环境图创建。LightProbeGenerator类可用于从CubeTexture或WebGLCubeRenderTarget的实例创建光探测器。然而，光估计数据也可以以其他形式提供，例如通过WebXR。这使得能够渲染对真实世界照明做出反应的增强现实内容

目前three.js中的探针实现支持所谓的漫射光探针。

这种类型的光探测器在功能上等同于辐照度环境图。

其构造器参数如下：

color- 灯光颜色。默认0xffffff.
intensity- 灯光强度。默认 1 。

DirectionLight 平行光

平行光是向特定方向发射的光。这种光的行为就好像它是无限遥远的，并且从它产生的光线都是平行的。这方面的常见用例是模拟日光；太阳离得足够远，它的位置可以被认为是无限的，所有来自它的光线都是平行的。

这种光可以投射阴影。示例代码：

//Create a DirectionalLight and turn on shadows for the light
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 1, 0 ); //default; light shining from top
light.castShadow = true; // default false
scene.add( light );

//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default

平行光的一个常见的问题是设置旋转没有效果。这是因为three.js的DirectionalLight相当于其他应用程序中通常称为“目标直射光”的东西。

这意味着它的方向计算为从灯光的位置指向目标的位置（而不是只有旋转组件的“自由直射光”）。

这样做的原因是允许光线投射阴影——阴影摄影机需要一个位置来计算阴影。

它的构造器参数如下：

color- 灯光颜色。默认0xffffff.
intensity- 灯光强度。默认 1 。

实例属性如下：

castShadow-如果设置为true，将投射动态阴影。提示：这是昂贵的，需要调整以使阴影看起来正确。
isDirectionalLight-只读属性，用于检查给定对象的类型是否为DirectionalLight
position- 位置将其设置为等于Object3D.DEFAULT_UP（0，1，0），以便灯光从上到下照射。
shadow-方向光阴影。用于计算此灯光的阴影的DirectionalLightShadow。

HemisphereLight 半球光

半球光

位于场景正上方的光源，颜色从天空颜色渐变为地面颜色。

此灯光不能用于投射阴影。

代码示例：

const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light )

其构造器参数如下：

skyColor-（可选）天空的十六进制颜色。默认值为0xffffff。
groundColor-（可选）地面的十六进制颜色。默认值为0xffffff。
skyColor-（可选）灯光强度/强度的数值。默认值为1。

PointLight 点光源

从一个点向所有方向发射的光。这方面的一个常见用例是灯泡发出的光。

此灯光可以投射阴影。

示例代码如下：

//Create a PointLight and turn on shadows for the light
const light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 10, 4 );
light.castShadow = true; // default false
scene.add( light );

//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default

其构造器参数如下：

color- 灯光颜色。默认0xffffff.
intensity- 灯光强度。默认 1 。
distance—灯光的最大范围。默认值为0（无限制）。
decay-衰减度即光线沿着光线的距离变暗的量。默认值为2。

RectAreaLight 矩形光

矩形光在一个矩形平面上均匀地发射光线。这种光源类型可用于模拟光源，例如明亮的窗户或条形照明，或者有点类似于商店的招牌的效果。

第181期：THREEJS中的灯光_JavaScript_02

需要注意的是：

这种光源不支持阴影
只支持MeshStandardMaterial和MeshPhysicalMaterial这两种材质。
必须将RectAreaLightUniformsLib库导入到场景中并进行初始化。

示例代码：

const width = 10;
const height = 10;
const intensity = 1;
const rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

const rectLightHelper = new RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );

其构造器参数如下：

color- 灯光颜色。默认0xffffff.
intensity- 灯光强度。默认 1 。
width- 灯光宽度。默认10。
height-灯光高度。默认10。

其实例属性有：

intensity- 灯光强度。默认 1 。
isRectAreaLight-用于检查给定对象是否为RectAreaLight类型。
power-功率。在物理正确模式下，功率是以流明（lm）为单位测量的光的发光功率。

SpotLight 聚光灯

聚光灯。如果有过搞装修的经验，你去建材市场上买灯的时候这种灯也叫射灯、或者筒灯。

这种光从一个方向的单个点发出，沿着一个圆锥体，该圆锥体的大小随着光的传播而增加。

示例代码：

const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.map = new THREE.TextureLoader().load( url );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

其构造器参数如下：