Three.js 辅助线效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
使用 Three.js 的 AxesHelper 显示坐标轴辅助线，帮助理解 3D 空间坐标系。

🖼️ 效果预览

Three.js 辅助线效果

🎮 案例演示

立即体验

效果描述

这是一个展示如何使用坐标轴辅助线的示例，帮助理解 3D 空间坐标系。

效果特性

  • 坐标轴辅助：使用 AxesHelper 显示坐标轴
  • X 轴红色：红色表示 X 轴方向
  • Y 轴绿色：绿色表示 Y 轴方向
  • Z 轴蓝色：蓝色表示 Z 轴方向
  • 网格模型：创建立方体网格模型
  • 红色材质：使用红色材质

核心参数

参数 值 说明
坐标轴大小 150 AxesHelper 大小
几何体大小 100, 50, 10 XYZ 三方向大小
材质颜色 0xff0000 红色
相机位置 (200, 200, 200) 相机位置
观察位置 (0, 10, 0) 相机观察点

核心代码解析

创建场景和模型

javascript
1
2
3
4
5
6
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);

添加坐标轴辅助

javascript
1
2
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

创建相机

javascript
1
2
3
const camera = new THREE.PerspectiveCamera();
camera.position.set(200, 200, 200);
camera.lookAt(0, 10, 0);

创建渲染器

javascript
1
2
3
4
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);

技术亮点

  1. AxesHelper：使用 AxesHelper 显示坐标轴
  2. 坐标系：展示 3D 空间坐标系
  3. 颜色编码：使用颜色区分坐标轴
  4. 辅助线：帮助理解 3D 空间
  5. 简单示例：最基础的辅助线示例

调试技巧

  1. 辅助线大小：调整 AxesHelper 大小
  2. 模型位置：调整模型位置观察坐标轴
  3. 相机位置：调整相机位置改变视角
  4. 观察点：调整观察点改变目标
  5. 几何体大小：调整几何体大小

扩展方向

  1. GridHelper：添加网格辅助线
  2. PlaneHelper：添加平面辅助线
  3. 多种辅助：添加多种辅助线
  4. 自定义辅助：创建自定义辅助线
  5. 辅助线动画：动画辅助线

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。