threejs 旋转轴显示

### 使用 `THREE.AxesHelper` 显示旋转轴

为了在 Three.js 场景中显示坐标轴，可以利用内置的帮助工具类 `THREE.AxesHelper`。此对象能够可视化表示世界空间中的 X (红色), Y (绿色) 和 Z (蓝色) 轴。

// 创建场景, 摄像机以及渲染器...
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加 AxesHelper 到场景中来展示坐标系
const axesHelper = new THREE.AxesHelper(5); // 参数定义轴线长度
scene.add(axesHelper);

// 设置摄像机位置并添加到场景中
camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    
    // 可在此处更新物体的位置或角度
    
    renderer.render(scene, camera);
}
animate();

如果目标是在特定的对象周围绘制局部坐标系，则可以通过调整辅助对象的父级关系达成：

const objectWithLocalAxes = new THREE.Mesh(
    geometry,
    material
);
objectWithLocalAxes.add(new THREE.AxesHelper());

scene.add(objectWithLocalAxes);

对于更复杂的变换操作如绕指定轴旋转，除了上述基础外还需要考虑应用矩阵转换或是直接修改欧拉角等方式完成所需效果[^1]。