在 Three.js 中绘制一个 3D 坐标系，通常涉及到创建三个代表 X、Y 和 Z 轴的线条，并且可以选择添加箭头来表示轴的方向。Three.js 提供了 AxesHelper 类，可以用来快速创建一个带有颜色编码轴的坐标系，其中红色代表 X 轴，绿色代表 Y 轴，蓝色代表 Z 轴。
以下是一个简单的示例代码，展示了如何在 Three.js 场景中添加一个坐标系：
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加坐标系辅助对象
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
在这段代码中，AxesHelper 的参数 5 表示坐标轴的大小。你可以根据需要调整这个值。这个坐标系会被添加到场景中，并且在渲染循环中被渲染出来。
如果你需要更复杂的坐标系，比如带有标签或者不同样式的轴，你可能需要自己创建几何体和材质来自定义坐标轴。但对于大多数基本用途，AxesHelper 提供了一个快速且简单的解决方案。
threejs版本号
"three": "^0.154.0",
