Threejs 光照教程，为 3D 场景注入灵魂

定义

光照是模拟现实世界中的光线照射效果，通过光照可以模拟现实世界中的物体表面反射光线的效果，从而产生明暗对比，使物体看起来更加真实。

光照类型

Three.js 中提供了以下几种光照类型：

环境光（AmbientLight）： 环境光是一种均匀的光源，它不会产生阴影，只会照亮整个场景。环境光通常用于模拟自然光的效果。
点光源（PointLight）： 点光源是一种从一个点向所有方向发射光线的光源，它会产生阴影。点光源通常用于模拟灯泡、蜡烛等光源的效果。
平行光（DirectionalLight）： 平行光是一种从一个方向向所有方向发射光线的光源，它会产生阴影。平行光通常用于模拟太阳光的效果。
半球光（HemisphereLight）： 半球光是一种从一个方向向所有方向发射光线的光源，它不会产生阴影。半球光通常用于模拟天空和地面的光照效果。
聚光灯（SpotLight）： 聚光灯是一种从一个点向一个方向发射光线的光源，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。它会产生阴影。聚光灯通常用于模拟手电筒、舞台灯光等光源的效果。
...

正如之前说到的有些材质不受光照影响，有些材质需要光的参与，不然漆黑一片。

AmbientLight

环境光是一种来自四面八方均匀的光源，它不会产生阴影，只会照亮整个场景。环境光通常用于模拟自然光的效果。

js 复制代码

const light = new THREE.AmbientLight(0xff0000, 0.5); // 红色，强度为0.5
scene.add(light);

参数：

color： 光的颜色，默认值为 0xffffff（白色）。
intensity： 光的强度，默认值为 1。

DirectionalLight

平行光是沿着特定方向发射的光。这种光的表现像是无限远，从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

js 复制代码

const light = new THREE.DirectionalLight(0xffffff, 1);
scene.add(light);

参数：

color： 光的颜色，默认值为 0xffffff（白色）。
intensity： 光的强度，默认值为 1。

加了平行光后，场景中物体的颜色会发生变化，因为平行光会改变物体表面的明暗对比。

DirectionalLightHelper 是一个用于显示 DirectionalLight 光线方向的辅助对象。它可以帮助我们更好地理解 DirectionalLight 的方向和位置。

js 复制代码

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0);
scene.add(light);

const helper = new THREE.DirectionalLightHelper(light, 1);
scene.add(helper);

参数：

light： 要显示方向的 DirectionalLight 对象。
size： 辅助对象的大小，默认值为 1。

添加辅助对象后可以更直观的看到光源的方向。默认平行光角度是垂直于地面的，所以看起来是水平的。

位置调整

js 复制代码

light.position.set(-5, 5, 0);

HemisphereLight

半球光是一种来自天空和地面的光源，光照颜色从天空光线颜色渐变到地面光线颜色。半球光通常用于模拟天空和地面的光照效果。半球光不能投射阴影。

js 复制代码

const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 1);
scene.add(hemisphereLight);

参数：

skyColor： 天空的颜色，默认值为 0xffffff（白色）。
groundColor： 地面的颜色，默认值为 0xffffff（白色）。
intensity： 光的强度，默认值为 1。

PointLight

点光源是一种从一个点向所有方向发射光线的光源，它会产生阴影。点光源通常用于模拟灯泡、蜡烛等光源的效果。

js 复制代码

const light = new THREE.PointLight(0xffffff, 1, 100);
scene.add(light);

参数：

color： 光的颜色，默认值为 0xffffff（白色）。
intensity： 光的强度，默认值为 1。
distance： 光源照射的最大距离，默认值为 0（表示无限远）。
decay： 沿着光照距离的衰退量。默认值为 2。

点光源同样也有辅助对象 PointLightHelper，用于显示点光源的位置和范围。

js 复制代码

const pointLight = new THREE.PointLight(0xff0000, 10, 100);
pointLight.position.set(0, 6, 0);
scene.add(pointLight);

const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
scene.add(pointLightHelper);

SpotLight

聚光灯是一种从一个点向特定方向发射光线的光源，它会产生阴影。聚光灯通常用于模拟手电筒、舞台灯光等光源的效果。

js 复制代码

const spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 0.5);
spotLight.position.set(0, 6, 0);
scene.add(spotLight);

参数：

color： 光的颜色，默认值为 0xffffff（白色）。
intensity： 光的强度，默认值为 1。
distance： 光源照射的最大距离，默认值为 0（表示无限远）。
angle： 聚光灯的圆锥角度，默认值为 Math.PI / 3。
penumbra： 聚光灯的半影衰减百分比，默认值为 0。
decay： 沿着光照距离的衰退量。默认值为 2。

书洞笔记