在 Three.js 中，参考线通常指的是辅助线，它们用于帮助开发者在 3D 场景中定位和对齐对象。以下是一些 Three.js 中常用的参考线类型： 建议先阅读完文章，再查看 [实例代码]

1. **辅助网格（Grid Helper）**：

• THREE.GridHelper 类可以用来在场景中生成一个网格，通常用于表示 XZ 平面上的参考线，这对于物体的放置和对齐非常有用。

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

其中 size 是网格的总尺寸，divisions 是网格的分割数。

2. 轴向箭头（Axes Helper）：

   • THREE.AxesHelper 类可以生成表示 X、Y 和 Z 轴的箭头，这对于确定物体的方向非常有用。

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

   size 参数定义了箭头的长度。

3. 自定义箭头（ArrowHelper）：

   • THREE.EdgesHelper 用于模拟方向的 3 维箭头对象.。

   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);

   在这里，dir 是一个 THREE.Vector3 对象，表示箭头指向的方向。origin 是箭头的起点。1 是箭头的长度，0xff0000 是箭头的颜色（红色）

4. 相机辅助线（Camera Helper）：

   • THREE.CameraHelper 类可以显示相机的视锥体，这对于理解相机的视角和裁剪面非常有用。

   const cameraHelper = new THREE.CameraHelper(camera);
   scene.add(cameraHelper);

   其中 camera 是场景中的相机对象。

5. 参考线（Reference Line）：

   • 虽然 Three.js 没有直接提供名为 "Reference Line" 的类，但是可以使用线条（THREE.Line）来创建自定义的参考线。

   const points = [
     new THREE.Vector3(x1, y1, z1),
     new THREE.Vector3(x2, y2, z2),
   ];
   const geometry = new THREE.BufferGeometry().setFromPoints(points);
   const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
   const line = new THREE.Line(geometry, material);
   scene.add(line);

   这里创建了一个简单的线条，连接两个点 (x1, y1, z1) 和 (x2, y2, z2)。

6. 其他辅助线：

BoxHelper

• 用途: 显示一个围绕物体的边框，用于可视化物体的边界框。

• 链接: BoxHelper

• 实例代码:

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh);

const boxHelper = new THREE.BoxHelper(boxMesh, 0xffff00); // 黄色边界框
scene.add(boxHelper);

Box3Helper

• 用途: 显示一个边框，用于可视化 Box3 对象，通常用于表示空间的边界。
• 链接: Box3Helper
• 实例代码:

const box3 = new THREE.Box3(
  new THREE.Vector3(-1, -1, -1),
  new THREE.Vector3(1, 1, 1)
);
const box3Helper = new THREE.Box3Helper(box3, 0x00ff00); // 绿色边界框
scene.add(box3Helper);

DirectionalLightHelper

• 用途: 显示极坐标网格，通常用于表示球面坐标。

• 链接: PolarGridHelper

• 实例代码:

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-1, 2, 4);
scene.add(directionalLight);

const lightHelper = new THREE.DirectionalLightHelper(
  directionalLight,
  1,
  0xff0000
); // 红色箭头
scene.add(lightHelper);

PolarGridHelper

• 用途: 显示极坐标网格，通常用于表示球面坐标。
• 链接: PolarGridHelper
• 实例代码:

const polarGridHelper = new THREE.PolarGridHelper(5, 16, 0x0000ff, 0x00ff00); // 蓝色和绿色网格
scene.add(polarGridHelper);

HemisphereLightHelper

• 用途: 显示一个平面，用于可视化 Plane 对象。
• 链接: PlaneHelper
• 实例代码:

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

const lightHelper = new THREE.HemisphereLightHelper(
  hemisphereLight,
  1,
  0xff0000,
  0x00ff00
); // 红色和绿色箭头
scene.add(lightHelper);

PlaneHelper

• 用途: 显示一个平面，用于可视化 Plane 对象。

• 链接: PlaneHelper

• 实例代码:

const planeGeometry = new THREE.PlaneGeometry(2, 2);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = -Math.PI / 2; // 调整平面使其平铺在 XZ 平面上
scene.add(planeMesh);

const planeHelper = new THREE.PlaneHelper(planeMesh, 0xff0000, 1); // 红色法线
scene.add(planeHelper);

PointLightHelper

• 用途: 可视化点光源的范围和衰减。

• 链接: PointLightHelper

• 实例代码:

const pointLight = new THREE.PointLight(0xffffff, 1, 10);
scene.add(pointLight);

const lightHelper = new THREE.PointLightHelper(pointLight, 0xff0000); // 红色光晕
scene.add(lightHelper);

SkeletonHelper

用途: 显示骨骼的骨架结构，用于动画调试。

• 链接: SkeletonHelper

• 实例代码:

// 假设 'mesh' 是一个带有骨骼的网格模型
const skeletonHelper = new THREE.SkeletonHelper(mesh);
scene.add(skeletonHelper);

SpotLightHelper

用途: SpotLightHelper 显示聚光灯的方向、范围和衰减，有助于理解聚光灯的属性和影响

• 链接: SpotLightHelper

• 实例代码:

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

const lightHelper = new THREE.SpotLightHelper(spotLight, 0xff0000); // 红色光锥
scene.add(lightHelper);