携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情 >>

今天我们来讨论各个光源的辅助对象：

光源辅助对象：就像是 AxisHelper 三维坐标轴一样显示光源对象，方便查看位置与方向。

DirectionalLightHelper 平行光辅助对象

用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段。

const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.3);
const directionalLightHelper = new THREE.DirectionalLightHelper(
    directionalLight,
    0.2
);
scene.add(directionalLightHelper);

HemisphereLightHelper 半球光辅助对象

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight。

参数：HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )，分别是被摸你的光源、用于模拟光源的网格尺寸、如果没有赋值辅助对象将使用光源的颜色(可选)。

const hemisphereLight = new THREE.HemisphereLight(
    0xff0000,
    0x0000ff,
    0.3
);
const hemisphereLightHelper = new THREE.HemisphereLightHelper(
    hemisphereLight,
    0.2
);
scene.add(hemisphereLightHelper);

PointLightHelper 点光源辅助对象

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 点光源 PointLight。

const pointLight = new THREE.PointLight(0xff9000, 0.5, 1);
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2);
scene.add(pointLightHelper);

RectAreaLightHelper 平面光光源辅助对象

创建一个表示 RectAreaLight 的辅助对象。

const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 2, 2, 1);
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight);
scene.add(rectAreaLightHelper);

更新rectAreaLightHelper辅助对象：

// 更新rectAreaLightHelper辅助对象
window.requestAnimationFrame(() => {
    // 写法1：
    rectAreaLightHelper.position.copy(rectAreaLight.position);
    rectAreaLightHelper.quaternion.copy(rectAreaLight.quaternion);
    // 写法2：
    // rectAreaLightHelper.position.x = rectAreaLight.position.x;
    // rectAreaLightHelper.position.y = rectAreaLight.position.y;
    // rectAreaLightHelper.position.z = rectAreaLight.position.z;
    rectAreaLightHelper.update();
});

SpotLightHelper 聚光灯辅助对象

用于模拟聚光灯 SpotLight 的锥形辅助对象。

const spotLight = new THREE.SpotLight(
    0x78ff00,
    0.5,
    10,
    Math.PI * 0.1,
    0.25,
    1
);
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);

更新spotLightHelper辅助对象：

// 更新spotLightHelper辅助对象
window.requestAnimationFrame(() => {
    spotLightHelper.update();
});

实现效果如下：

在下图中，我们可以看到各个光源辅助对象，查看其对应光源的位置及其种类：