Three.js 几何体类型

提示词

PROMPT
1
使用 Three.js 创建多种类型的几何体，包括立方体、球体、圆柱、平面和圆形。

效果描述

这是一个展示如何创建多种类型几何体的示例，包括常见的 3D 几何体类型。

效果特性

  • 立方体：BoxGeometry 创建立方体
  • 球体：SphereGeometry 创建球体
  • 圆柱：CylinderGeometry 创建圆柱
  • 矩形平面：PlaneGeometry 创建矩形平面
  • 圆形平面：CircleGeometry 创建圆形平面
  • 轨道控制：使用 OrbitControls 控制视角

核心参数

参数 值 说明
立方体大小 10, 10, 10 XYZ 三方向大小
球体半径 10 球体半径
圆柱参数 10, 10, 100 半径、半径、高度
矩形平面 10, 50 宽度、高度
圆形半径 10 圆形半径
材质颜色 0xff0000 红色

核心代码解析

创建多种几何体

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
// BoxGeometry：长方体
const geometry1 = new THREE.BoxGeometry(10, 10, 10);
// SphereGeometry：球体
const geometry2 = new THREE.SphereGeometry(10);
// CylinderGeometry：圆柱
const geometry3 = new THREE.CylinderGeometry(10, 10, 100);
// PlaneGeometry：矩形平面
const geometry4 = new THREE.PlaneGeometry(10, 50);
// CircleGeometry：圆形平面
const geometry5 = new THREE.CircleGeometry(10);

创建材质和网格

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

const mesh1 = new THREE.Mesh(geometry1, material);
mesh1.position.set(0, 0, 0);
const mesh2 = new THREE.Mesh(geometry2, material);
mesh2.position.set(0, 0, 30);
const mesh3 = new THREE.Mesh(geometry3, material);
mesh3.position.set(0, 0, 60);
const mesh4 = new THREE.Mesh(geometry4, material);
mesh4.position.set(0, 0, 90);
const mesh5 = new THREE.Mesh(geometry5, material);
mesh5.position.set(0, 0, 120);

scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
scene.add(mesh4);
scene.add(mesh5);

添加辅助线和控制器

JAVASCRIPT
1
2
3
4
5
6
7
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", function () {
    renderer.render(scene, camera);
});

技术亮点

  1. 多种几何体：展示常见的 3D 几何体类型
  2. BoxGeometry：创建立方体
  3. SphereGeometry：创建球体
  4. CylinderGeometry：创建圆柱
  5. PlaneGeometry：创建平面

调试技巧

  1. 几何体参数：调整几何体参数改变形状
  2. 材质颜色：调整材质颜色
  3. 模型位置：调整模型位置避免重叠
  4. 相机位置：调整相机位置观察所有模型
  5. 观察点：调整观察点改变目标

扩展方向

  1. 更多几何体：添加更多几何体类型
  2. 几何体参数：调整几何体参数
  3. 材质类型：使用不同材质类型
  4. 几何体动画：动画几何体
  5. 自定义几何体：创建自定义几何体

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