【Three.js】知识梳理八：Three.js常用辅助对象-CSDN博客

本文链接：https://blog.csdn.net/lwzhang1101/article/details/139618829

1. AxesHelper（坐标轴辅助对象）

AxesHelper 类用于在场景中创建一个坐标轴辅助对象，表示 X、Y 和 Z 轴。这对于确定场景中物体的方向和位置非常有用。AxesHelper 构造函数接受以下参数：

size：坐标轴的大小（可选，默认值为 1）

代码示例：

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

2. PolarGridHelper（极坐标辅助对象）

PolarGridHelper 类用于在场景中创建一个极坐标网格。极坐标网格由同心圆和径向线组成，通常用于表示极坐标系下的数据。PolarGridHelper 构造函数接受以下参数：

radius：网格的最大半径
radials：径向线的数量
circles：同心圆的数量
divisions：表示每个圆之间的角度划分数量
color1：网格线的主要颜色（可选）
color2：网格线的次要颜色（可选）

代码示例：

const radius = 10;
const radials = 16;
const circles = 8;
const divisions = 64;

const helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );

3. GridHelper（网格辅助对象）

GridHelper 类用于在场景中创建一个网格辅助对象。网格由水平线和垂直线组成，通常用于表示笛卡尔坐标系下的数据。GridHelper 构造函数接受以下参数：

size：网格的大小
divisions：网格的分割数，表示网格线的数量
color1：网格线的主要颜色（可选）
color2：网格线的次要颜色（可选）

代码示例：

const radius = 10;
const radials = 16;
const circles = 8;
const divisions = 64;

const helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );

4. BoxHelper（包围盒辅助对象）

BoxHelper 类用于在场景中创建一个包围盒辅助对象。包围盒是一个立方体，用于表示物体的边界。BoxHelper 可以帮助可视化物体的边界，以便于调整物体的位置和大小。BoxHelper 构造函数接受以下参数：

object：一个 Object3D 对象，BoxHelper 将根据此对象计算包围盒
color：辅助对象的颜色（可选）

代码示例：

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

5. PlaneHelper（平面辅助对象）

PlaneHelper 类用于在场景中创建一个平面辅助对象。平面辅助对象可以帮助可视化一个 Plane 类实例，用于表示空间中的一个平面。PlaneHelper 构造函数接受以下参数：

plane：一个 Plane 对象，表示一个平面
size：平面辅助对象的大小（可选，默认值为 1）
color：辅助对象的颜色（可选）

代码示例：

const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
const helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
scene.add( helper );

6. CameraHelper（相机辅助对象）

CameraHelper 类用于在场景中创建一个相机辅助对象。相机辅助对象可以帮助可视化相机的视锥体（表示相机所能看到的空间范围）和视点。这对于调整相机的参数和位置非常有用。CameraHelper 构造函数接受以下参数：

camera：一个 Camera 对象，表示要辅助可视化的相机

代码示例：

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const helper = new THREE.CameraHelper( camera );
scene.add( helper );

7. SkeletonHelper（骨骼可视化辅助对象）

SkeletonHelper 类用于在场景中创建一个骨骼的可视化辅助对象。骨骼通常用于描述角色或物体的动画和变形。SkeletonHelper 可以显示骨骼结构，帮助开发者调试和优化动画。SkeletonHelper 构造函数接受以下参数：

object：一个包含骨骼的 Object3D 对象（如 SkinnedMesh）
color：辅助对象的颜色（可选）

8. ArrowHelper（箭头辅助对象）

ArrowHelper 类用于在场景中创建一个箭头对象。箭头由一个细长的柱体（轴）和一个锥体（箭头）组成。它可以用来表示方向、速度矢量或者其他需要指向的概念。ArrowHelper 构造函数接受以下参数：

dir：箭头指向的方向（一个 Vector3 对象）
origin：箭头的起点（一个 Vector3 对象）
length：箭头的长度
color：箭头的颜色（可选）
headLength：箭头头部的长度（可选）
headWidth：箭头头部的宽度（可选）

代码示例：

const dir = new THREE.Vector3( 1, 2, 0 );

//normalize the direction vector (convert to vector of length 1)
dir.normalize();

const origin = new THREE.Vector3( 0, 0, 0 );
const length = 1;
const hex = 0xffff00;

const arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );

9. DirectionalLightHelper（方向光源辅助对象）

DirectionalLightHelper 类用于在场景中创建一个方向光源辅助对象。方向光源是一种平行光源，用于模拟太阳光等远离物体的光源。DirectionalLightHelper 可以帮助可视化方向光源的位置和方向。DirectionalLightHelper 构造函数接受以下参数：

light：一个 DirectionalLight 对象，表示要辅助可视化的光源
size：辅助对象的大小（可选，默认值为 1）
color：辅助对象的颜色（可选）

代码示例：

const light = new THREE.DirectionalLight( 0xFFFFFF );
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

10. HemisphereLightHelper（半球光源辅助对象）

HemisphereLightHelper 类用于在场景中创建一个半球光源辅助对象。半球光源是一种模拟环境光的光源，可以产生自然的光照效果。HemisphereLightHelper 可以帮助可视化半球光源的位置和颜色。HemisphereLightHelper 构造函数接受以下参数：

light：一个 HemisphereLight 对象，表示要辅助可视化的光源
size：辅助对象的大小（可选，默认值为 1）
color：辅助对象的颜色（可选）

代码示例：

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

11. PointLightHelper（点光源辅助对象）

PointLightHelper 类用于在场景中创建一个点光源辅助对象。点光源是一种发散光源，可以在所有方向上均匀发光。PointLightHelper 可以帮助可视化点光源的位置和范围。PointLightHelper 构造函数接受以下参数：

light：一个 PointLight 对象，表示要辅助可视化的光源
sphereSize：辅助对象球体的大小（可选，默认值为 1）
color：辅助对象的颜色（可选）

代码示例：

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

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

12. SpotLightHelper（聚光灯光源辅助对象）

SpotLightHelper 类用于在场景中创建一个聚光灯光源辅助对象。聚光灯光源是一种定向光源，可以产生聚焦效果。SpotLightHelper 可以帮助可视化聚光灯光源的位置、方向和范围。SpotLightHelper 构造函数接受以下参数：

light：一个 SpotLight 对象，表示要辅助可视化的光源
color：辅助对象的颜色（可选）

代码示例：

const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 10 );
scene.add( spotLight );

const spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );