如何在Three.js中固定AxesHelper到指定位置且不随场景旋转？

要实现类似3D软件中固定在屏幕角落的坐标轴辅助器，核心是让AxesHelper脱离主场景的3D空间绑定，锚定到屏幕空间，以下是两种实用的实现方案：

方法一：将AxesHelper挂载到相机子节点（简单快捷） #

把AxesHelper添加为相机的子元素，它会始终跟随相机视角，不受主场景旋转影响，再通过调整局部位置将其固定在屏幕左下角：

// 假设已创建透视相机camera与主场景scene
const axesHelper = new THREE.AxesHelper(5); // 5为坐标轴长度，可按需调整
camera.add(axesHelper);

// 设置局部位置，让坐标轴显示在屏幕左下角（数值需根据相机参数微调）
axesHelper.position.set(-10, -5, 10);
// 若希望坐标轴始终朝向屏幕（不随相机旋转改变自身朝向），添加此行：
axesHelper.quaternion.copy(camera.quaternion);

注意：当相机移动或旋转时，该辅助器会保持与相机的相对位置，视觉上始终处于屏幕固定区域。若需要精准的像素级定位，推荐使用第二种方法。

方法二：用正交相机单独渲染AxesHelper（精准屏幕定位） #

创建独立的正交相机专门渲染AxesHelper，完全脱离主场景的3D空间，可精准控制其屏幕像素位置：

// 1. 创建适配屏幕的正交相机
const orthoCamera = new THREE.OrthographicCamera(
  window.innerWidth / -2,
  window.innerWidth / 2,
  window.innerHeight / 2,
  window.innerHeight / -2,
  0.1,
  1000
);
orthoCamera.position.z = 10; // 确保辅助器在相机可视范围内

// 2. 创建AxesHelper并添加到独立场景（也可复用主场景，但需注意渲染顺序）
const axesScene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(50); // 长度按屏幕像素比例调整
// 定位到屏幕左下角，坐标为屏幕像素坐标系
axesHelper.position.set(-window.innerWidth/2 + 50, -window.innerHeight/2 + 50, 0);
axesScene.add(axesHelper);

// 3. 渲染循环中先渲染主场景，再渲染正交相机的场景
function animate() {
  requestAnimationFrame(animate);
  
  // 渲染主场景
  renderer.render(scene, camera);
  
  // 渲染坐标轴辅助器，需关闭自动清除避免覆盖主场景
  renderer.autoClear = false;
  renderer.render(axesScene, orthoCamera);
  renderer.autoClear = true;
}

这种方式能让AxesHelper完全不受主相机、场景变换的影响，和专业3D软件中的固定坐标轴效果完全一致。

额外注意事项 #

• 方法一需在窗口resize时同步更新相机参数与辅助器位置：

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  axesHelper.position.set(-10, -5, 10); // 按需微调数值
});

• 方法二也需在resize时更新正交相机参数与辅助器位置：

window.addEventListener('resize', () => {
  orthoCamera.left = window.innerWidth / -2;
  orthoCamera.right = window.innerWidth / 2;
  orthoCamera.top = window.innerHeight / 2;
  orthoCamera.bottom = window.innerHeight / -2;
  orthoCamera.updateProjectionMatrix();
  axesHelper.position.set(-window.innerWidth/2 + 50, -window.innerHeight/2 + 50, 0);
});

内容的提问来源于stack exchange，提问作者zenhanu