企业官网建设流程全解析

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

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

• 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）的偏移。

实现步骤

• 沿用 入门 的 Scene / Mesh / Camera / Renderer 结构
• new THREE.AxesHelper(150)创建辅助线
• scene.add(axesHelper)加入场景
• 一次性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

  小结

  • 本文提供辅助线完整 Three.js 源码与在线 Demo，建议先运行案例再改 uniform/参数做二次实验
  • 更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库