当前位置：首页 > backend >正文

从零开始学习three.js（19）：一文详解three.js中的辅助类Helper

backend 2025/5/17 9:31:57

1. AxesHelper（坐标轴辅助）

用途：显示物体的三维坐标轴（X:红, Y:绿, Z:蓝）。
构造函数：
```
new THREE.AxesHelper(size: Number);
```

示例：

const axes = new THREE.AxesHelper(5);
scene.add(axes);

2. GridHelper（网格辅助）

用途：创建笛卡尔网格平面，用于场景布局参考。

构造函数：

new THREE.GridHelper(size: Number, divisions: Number, colorCenterLine: Color, colorGrid: Color
);

示例：

const grid = new THREE.GridHelper(100, 20, 0x444444, 0x888888);
scene.add(grid);

3. PolarGridHelper（极坐标网格辅助）

用途：生成极坐标系下的同心圆和径向线。

构造函数：

new THREE.PolarGridHelper(radius: Number, radials: Number, circles: Number, divisions: Number, color1: Color, color2: Color
);

二、几何与空间辅助类

4. BoxHelper（包围盒辅助）

用途：根据物体几何体自动生成包围盒线框。

构造函数：

new THREE.BoxHelper(object: Object3D, color: Color);

动态更新：

boxHelper.update(); // 当物体变换后调用

5. Box3Helper（自定义包围盒辅助）

用途：直接基于Box3对象显示包围盒。

构造函数：

new THREE.Box3Helper(box: Box3, color: Color);

6. PlaneHelper（平面辅助）

用途：可视化无限延伸的平面（如反射平面）。

构造函数：

new THREE.PlaneHelper(plane: Plane, size: Number, color: Color);

7. EdgesHelper（边缘高亮辅助）

用途：显示几何体的硬边（非平滑边缘）。

构造函数：

new THREE.EdgesHelper(object: Mesh, color: Color);

三、光源辅助类

8. DirectionalLightHelper（平行光辅助）

用途：显示平行光的方向和位置。

构造函数：

new THREE.DirectionalLightHelper(light: DirectionalLight, size: Number, color: Color
);

9. PointLightHelper（点光源辅助）

用途：可视化点光源的位置和衰减范围。

构造函数：

new THREE.PointLightHelper(light: PointLight, sphereSize: Number, color: Color
);

10. SpotLightHelper（聚光灯辅助）

用途：显示聚光灯的锥形范围和方向。

构造函数：

new THREE.SpotLightHelper(light: SpotLight, color: Color);

动态更新：

lightHelper.update(); // 光源参数变化后调用

11. HemisphereLightHelper（半球光辅助）

用途：显示半球光源的颜色渐变。

构造函数：

new THREE.HemisphereLightHelper(light: HemisphereLight, size: Number, color: Color
);

12. RectAreaLightHelper（区域光辅助）

用途：可视化矩形区域光的形状和方向（需导入RectAreaLightHelper）。

使用：

import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
const helper = new RectAreaLightHelper(light);
scene.add(helper);

四、相机与视图辅助类

13. CameraHelper（相机视锥体辅助）

用途：显示相机的视锥体（可视范围）。

构造函数：

new THREE.CameraHelper(camera: Camera);

14. FrustumHelper（视锥体辅助）

用途：独立显示任意视锥体（需手动定义）。

构造函数：

new THREE.FrustumHelper(frustum: Frustum, color: Color);

五、动画与骨骼辅助类

15. SkeletonHelper（骨骼辅助）

用途：显示蒙皮模型的骨骼结构。

构造函数：

new THREE.SkeletonHelper(object: SkinnedMesh);

16. VertexNormalsHelper（顶点法线辅助）

用途：显示几何体每个顶点的法线方向。

构造函数：

new THREE.VertexNormalsHelper(object: Object3D, size: Number, color: Color, lineWidth: Number
);

17. FaceNormalsHelper（面法线辅助）

用途：显示几何体每个面的法线方向。

构造函数：

new THREE.FaceNormalsHelper(object: Object3D, size: Number, color: Color, lineWidth: Number
);

六、物理与路径辅助类

18. ArrowHelper（箭头辅助）

用途：表示向量方向（如速度、力）。

构造函数：

new THREE.ArrowHelper(dir: Vector3, origin: Vector3, length: Number, color: Color, headLength: Number, headWidth: Number
);

19. PathHelper（路径辅助）

用途：可视化3D路径（需手动定义点数组）。

构造函数：

new THREE.PathHelper(path: Array<Vector3>, color: Color, lineWidth: Number
);

七、其他辅助类

20. LightProbeHelper（光照探针辅助）

用途：显示光照探针的球谐光照数据（用于环境光照）。

构造函数：

new THREE.LightProbeHelper(lightProbe: LightProbe, size: Number);

21. PositionalAudioHelper（空间音频辅助）

用途：显示PositionalAudio的影响范围。

构造函数：

new THREE.PositionalAudioHelper(audio: PositionalAudio);

八、注意事项与最佳实践

性能优化：
- Helper本质是线框模型，大量使用可能影响性能，建议调试完成后移除。
- 使用helper.visible = false临时隐藏，而非直接删除。
动态更新：
- 部分Helper需手动更新（如BoxHelper.update()、SpotLightHelper.update()）。
版本兼容性：
- BoundingBoxHelper在r125+后废弃，改用BoxHelper。
- 部分Helper需导入扩展库（如RectAreaLightHelper）。
自定义样式：
- 通过helper.material.color.set(0xff0000)修改颜色。
- 调整线宽需启用WebGLRenderer的linewidth支持。