如何在Three.js中绘制X、Y两个坐标轴？

Three.js 没有提供专门的 XY 坐标轴 Helper，但有两种简单的实现方式：

• 方法一：修改现有 AxesHelper
  创建标准的 AxesHelper 后，直接隐藏 Z 轴对应的线段即可。AxesHelper 的子元素顺序固定为 X、Y、Z 轴，只需将第三个子元素设为不可见：

  // 创建尺寸为5的坐标轴辅助器
  const axesHelper = new THREE.AxesHelper(5);
  // 隐藏Z轴
  axesHelper.children[2].visible = false;
  scene.add(axesHelper);
  

• 方法二：手动构建 XY 轴
  如果需要更高的自定义性（比如调整颜色、线段样式等），可以直接用 LineSegments 手动创建：

  // 定义XY轴的顶点数据：X轴从原点到(5,0,0)，Y轴从原点到(0,5,0)
  const vertices = new Float32Array([
    0, 0, 0, 5, 0, 0, // X轴
    0, 0, 0, 0, 5, 0  // Y轴
  ]);
  
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
  
  // 定义轴颜色：X轴红色，Y轴绿色
  const colors = new Float32Array([
    1, 0, 0, 1, 0, 0, // X轴红色
    0, 1, 0, 0, 1, 0  // Y轴绿色
  ]);
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  
  const material = new THREE.LineBasicMaterial({ vertexColors: true });
  const xyAxes = new THREE.LineSegments(geometry, material);
  scene.add(xyAxes);
  

内容的提问来源于stack exchange，提问作者T-Cuong