辅助线
Helper Line
你将学到什么
AxesHelper辅助线的用途与颜色含义- Three.js 右手坐标系 的方向约定
- 为什么开发时几乎总会加一根坐标轴
效果说明
红色长方体旁边出现三根彩色线段：红=X、绿=Y、蓝=Z，从原点向外延伸 150 单位。这是 AxesHelper 绘制的世界坐标轴，帮助你判断物体的位置和朝向。
核心概念
Three.js 与 OpenGL/WebGL 一样，采用 右手坐标系：
| 轴 | 颜色 | 方向（默认） |
|---|---|---|
| X | 红 | 向右 |
| Y | 绿 | 向上 |
| Z | 蓝 | 朝向观察者（屏幕外） |
AxesHelper(size) 在场景原点绘制三根线，长度 = size。它本身也是 Object3D，可以 scene.add(axesHelper) 或挂到某个 mesh 下作为局部坐标轴。
与 mesh.position 的关系： 本案例中 mesh 在 y=10，你会看到立方体「坐在」X-Z 平面上方，而坐标轴原点仍在 (0,0,0)——这说明 position 是 mesh 相对父级（scene）的偏移。
实现步骤
- 沿用 入门 的 Scene / Mesh / Camera / Renderer 结构
new THREE.AxesHelper(150)创建辅助线scene.add(axesHelper)加入场景- 一次性
render
代码要点
js
// AxesHelper(长度) — 仅用于调试，不参与物理/碰撞
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);生产环境
AxesHelper 仅用于开发调试，上线前通常移除或使用 axesHelper.visible = false。
源码
js
import * as THREE from 'three';
// X:红色方向
// Y：绿色方向
// Z：蓝色方向
// 场景
const scene = new THREE.Scene();// 创建场景
const geometry = new THREE.BoxGeometry(100, 50, 10); //几何体
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); //材质
const mesh = new THREE.Mesh(geometry, material); //网格模型
mesh.position.set(0, 10, 0); //网格模型位置
scene.add(mesh); //场景添加网格模型
// AxesHelper
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
// 相机
const camera = new THREE.PerspectiveCamera(); //相机
camera.position.set(200, 200, 200); //相机位置
camera.lookAt(0, 10, 0); //相机观察位置
// 渲染器
const renderer = new THREE.WebGLRenderer(); // 创建渲染器
const box = document.getElementById('box');
renderer.setSize(box.clientWidth, box.clientHeight); //渲染区域
renderer.render(scene, camera); //执行渲染
box.appendChild(renderer.domElement);小结
- 开发 Three.js 时 先看坐标轴 再调 position/rotation，能少踩很多坑
- 上一篇：入门 · 下一篇：光线 — 光源与材质的关系
入门案例 · Three.js · 2/15