Three.js 内置几何体顶点

提示词

PROMPT
1
使用 Three.js 的内置几何体，查看和分析几何体的顶点位置数据。

效果描述

这是一个展示如何查看内置几何体顶点位置数据的示例。

效果特性

  • 多种几何体：使用多种内置几何体
  • 顶点数据：查看几何体顶点位置数据
  • 数据输出：在控制台输出顶点数据
  • 几何体细分：设置几何体细分数
  • 轨道控制：使用 OrbitControls 控制视角
  • 实时渲染：相机变化时实时渲染

核心参数

参数 值 说明
立方体大小 10, 10, 10 XYZ 三方向大小
球体半径 10 球体半径
圆柱参数 10, 10, 100 半径、半径、高度
矩形平面 10, 50, 10, 10 宽度、高度、宽度分段、高度分段
圆形半径 10 圆形半径

核心代码解析

创建多种几何体

JAVASCRIPT
1
2
3
4
5
const geometry1 = new THREE.BoxGeometry(10, 10, 10);
const geometry2 = new THREE.SphereGeometry(10);
const geometry3 = new THREE.CylinderGeometry(10, 10, 100);
const geometry4 = new THREE.PlaneGeometry(10, 50, 10, 10);
const geometry5 = new THREE.CircleGeometry(10);

输出顶点数据

JAVASCRIPT
1
2
3
4
5
6
console.log("顶点位置数据", geometry1);
console.log("顶点位置数据", geometry1.attributes.position);
console.log("顶点位置数据", geometry2.attributes.position);
console.log("顶点位置数据", geometry3.attributes.position);
console.log("顶点位置数据", geometry4.attributes.position);
console.log("顶点位置数据", geometry5.attributes.position);

创建网格和控制器

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);

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

技术亮点

  1. 多种几何体：展示多种内置几何体
  2. 顶点数据：查看几何体顶点数据
  3. 数据输出：在控制台输出数据
  4. 几何体细分：设置几何体细分数
  5. 轨道控制：使用轨道控制器

调试技巧

  1. 顶点数据：查看控制台输出的顶点数据
  2. 几何体参数：调整几何体参数
  3. 细分数：调整几何体细分数
  4. 相机位置：调整相机位置观察不同几何体
  5. 材质颜色：调整材质颜色

扩展方向

  1. 更多几何体：添加更多几何体类型
  2. 顶点操作：操作顶点数据
  3. 几何体变换：变换几何体
  4. 自定义几何体：创建自定义几何体
  5. 顶点动画：动画顶点数据

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