LightProbeHelper是 Three.js 中用于可视化光照探针（LightProbe）的辅助工具。LightProbe用于采集场景的环境光信息，特别适合实现基于图像的照明（Image-Based Lighting，简称 IBL）。这种技术可以通过环境光信息为场景中的物体提供逼真的光照和阴影效果，尤其是金属和光滑材质。
RectAreaLightHelper 是 Three.js 中用于可视化 RectAreaLight 的辅助工具。RectAreaLight 是一种矩形的面光源，通常用于模拟从窗户、屏幕等大表面发出的光。RectAreaLight 能产生非常逼真的光照效果，特别是在需要柔和光线和真实阴影的场景中，比如摄影棚或室内渲染。
VertexNormalsHelper 是 Three.js 提供的一个辅助工具，用于在 3D 场景中可视化网格对象（Mesh）的顶点法线（Vertex Normals）。顶点法线是决定光照和阴影效果的重要因素，它们表示模型表面在每个顶点的方向。在调试光照、材质效果时，了解顶点法线的分布可以帮助发现模型的凹凸、平滑等问题。
VertexTangentsHelper 是一个用于在 Three.js 中可视化网格对象（Mesh）顶点切线（Vertex Tangents）的辅助工具。顶点切线是纹理坐标系统中的一个方向向量，通常和法线一起使用，特别是在实现法线贴图（normal mapping）效果时。切线可以帮助创建更真实的光照和阴影效果。
LightProbeHelper 有两个属性一方法，继承mash的方法与属性 有了这个方法能很好的调试球谐函数中一些比较困难的点。
LightProbeHelper( lightProbe : LightProbe, size : Number ) lightProbe -- 光照探针。 size -- 辅助球体的大小。
// 创建球谐函数对象
const sh = new THREE.SphericalHarmonics3();
// 设置球谐函数的系数，使其不反射空中的光照
sh.coefficients[0].set(0.0, 0.0, 0.0); // 均匀的天空光设为 0
sh.coefficients[1].set(0.0, 0.0, 0.0); // 从天空方向来的光照设为 0
sh.coefficients[2].set(1.0, 0.0, 0.0); // 从地面反射回来的光照 偏红
// 创建环境光探针并应用球谐函数
const lightProbe = new THREE.LightProbe(sh);
scene.add(lightProbe);
const helper = new LightProbeHelper( lightProbe, 1 );
scene.add( helper );
属性
- lightProbe : LightProbe 光照探针。 光照探针对象句柄
- size : Number 辅助球体的大小。 光照探针的辅助球体大小
方法
- dispose () : undefined 释放内部资源。清除当前句柄所占用的资源。
RectAreaLightHelper 有两个属性一个方法 基本属性继承 Object3D
RectAreaLightHelper( light : RectAreaLight, color : Hex ) light -- 被模拟的光源. color -- (可选) 如果没有赋值辅助对象将使用光源的颜色.
// 创建一个立方体
const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 20, 0);
cube.castShadow = true; // 使立方体投射阴影
scene.add(cube);
const rectLight = new THREE.RectAreaLight( 0xff0000, 1, 100, 100 );
rectLight.position.set( 5, 50, 0 );
rectLight.castShadow = true;
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )
// 添加 RectAreaLightHelper
const rectLightHelper = new RectAreaLightHelper(rectLight);
scene.add(rectLightHelper);
属性
- light : RectAreaLight 被模拟的区域光源. 需要被调试的区域光的光源
- color : hex 构造函数中传入的颜色值. 默认为 undefined. 如果改变该值, 辅助对象的颜色将在下一次 update 被调用时更新.
方法
- dispose () : undefined 释放内部资源。清除当前句柄所占用的资源。
VertexNormalsHelper 有三个属性一个方法 公共属性继承 LineSegments
VertexNormalsHelper( object : Object3D, size : Number, color : Hex, linewidth : Number ) object -- 要渲染顶点法线辅助的对象. size -- (可选的) 箭头的长度. 默认为 1. color -- 16进制颜色值. 默认为 0xff0000. linewidth -- (可选的) 箭头线段的宽度. 默认为 1.
// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽、高、深为 1 的立方体
const material = new THREE.MeshNormalMaterial(); // 使用普通材质，便于观察法线方向
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建顶点法线辅助器
const helper = new VertexNormalsHelper(cube, 0.2, 0xff0000); // 法线长度 0.2，红色
scene.add(helper);
属性
- matrixAutoUpdate : Object 这里设置为 false 表示辅助对象 使用对象的世界矩阵 matrixWorld.否则使用设置的矩阵
- object : Object3D 被渲染顶点法线辅助的对象.
- size : Number 箭头的长度. 默认为 1.
方法
- update () : undefined 基于对象的运动更新顶点法线辅助对象.
VertexTangentsHelper 有三个属性一个方法 LineSegments 继承基类
VertexTangentsHelper( object : Object3D, size : Number, color : Hex ) object -- 要为其渲染顶点切线的对象。 size -- （可选）箭头的长度。默认值为 1。 color --（可选）箭头的十六进制颜色。默认值为 0x00ffff。
// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 立方体
geometry.computeTangents(); // 计算切线以便显示
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建顶点切线辅助器
const tangentsHelper = new VertexTangentsHelper(cube, 0.2, 0x00ff00); // 切线长度为 0.2，绿色
scene.add(tangentsHelper);
// 创建 OrbitControls 实例
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器的目标点
controls.target.set(0, 0, 0); // 将目标点设置为立方体的中心
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 更新切线辅助器
tangentsHelper.update();
controls.update(); // 更新 OrbitControls
renderer.render(scene, camera);
}
animate();
属性
- matrixAutoUpdate : Object 默认设置为 false，因为正在使用对象的 matrixWorld。
- object : Object3D 对其顶点切线进行可视化的对象。
- size : Number 箭头的长度。默认值为 1。
方法
- update () : undefined 根据对象的世界变换更新顶点切线预览。
- dispose () : undefined 释放该实例分配的GPU相关资源。每当您的应用程序中不再使用此实例时，请调用此方法。
总结 部分示辅助中有 matrixAutoUpdate 这个属性能够在辅助显示物体不产生矩阵变化时模似矩阵信息，以达到调试变化的目地
