辅助线 ·Helper Line· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么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 在y10你会看到立方体「坐在」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 开源仓库
