辅助线 · Helper Line · ▶ 在线运行案例

辅助线

你将学到什么

  • Scene / Camera / Renderer 标准渲染管线搭建
  • 案例完整源码结构与可复用初始化模板

效果说明

红色长方体旁边出现三根彩色线段：红=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）的偏移。

实现步骤

  1. 沿用 入门 的 Scene / Mesh / Camera / Renderer 结构
  2. new THREE.AxesHelper(150) 创建辅助线
  3. scene.add(axesHelper) 加入场景
  4. 一次性 render

代码要点


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);

完整源码：GitHub

小结