如何在ThreeJS中绘制负XYZ坐标轴（手动实现方案）

Three.js的AxesHelper仅支持正方向坐标轴绘制，要实现负方向的橙色坐标轴，可通过LineSegments手动创建线段完成，具体实现如下：

实现步骤 #

1. 定义负方向坐标轴的端点坐标：以原点为起点，分别指向-X、-Y、-Z方向，长度可与原正轴保持一致（示例中为100）。
2. 创建BufferGeometry并传入坐标数据，这是高效渲染多条线段的方式。
3. 配置橙色的LineBasicMaterial作为坐标轴材质。
4. 生成LineSegments对象并添加到场景中。

完整代码示例 #

// 定义负方向坐标轴的坐标点（每组两个点代表一条线段：原点 → 负方向终点）
const negativeAxesCoords = new Float32Array([
  // -X轴
  0, 0, 0,   -100, 0, 0,
  // -Y轴
  0, 0, 0,    0, -100, 0,
  // -Z轴
  0, 0, 0,    0, 0, -100
]);

// 创建几何体
const negativeAxesGeo = new THREE.BufferGeometry();
negativeAxesGeo.setAttribute('position', new THREE.BufferAttribute(negativeAxesCoords, 3));

// 创建橙色材质（可根据需求调整颜色值）
const negativeAxesMat = new THREE.LineBasicMaterial({ color: 0xffa500 });

// 创建负方向坐标轴并添加到场景
const negativeAxes = new THREE.LineSegments(negativeAxesGeo, negativeAxesMat);
scene.add(negativeAxes);

若需单独控制每条负轴的样式（如不同颜色），可拆分创建多个Line对象，分别配置对应材质即可。

内容的提问来源于stack exchange，提问作者Daniel Téllez Llinás