内置几何体

Three.js 的核心之一就是几何体（Geometry），几何体是构建三维模型的骨架。无论是一个简单的立方体，还是一个复杂的人物模型，几何体都提供了物体的结构框架。

BufferGeometry 是 Three.js 中用于存储几何体数据的高效数据结构。它使用**缓冲区属性（Buffer Attributes）**来存储几何体的各种信息：

• position（位置）：顶点的 3D 坐标 (x, y, z)
• normal（法线）：用于光照计算的法线向量
• uv（UV 坐标）：用于纹理映射的 2D 坐标 (u, v)
• index（索引）：定义面的顶点索引
• color（颜色）：顶点颜色（可选）

BoxGeometry 立方体

BoxGeometry 是立方体几何体，官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry

示例代码：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

PlaneGeometry 平面

PlaneGeometry 用于创建平面，官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#PlaneGeometry

示例代码：

const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

ShapeGeometry 形状

ShapeGeometry 用于创建自定义形状，只要用的得当，可以绘制出很多独特的图形，官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#ShapeGeometry

示例代码：

const x = 0,
  y = 0;

const heartShape = new THREE.Shape();

heartShape.moveTo(x + 5, y + 5);
heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);

const geometry = new THREE.ShapeGeometry(heartShape);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

CircleGeometry 圆形

CircleGeometry 是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#CircleGeometry

示例代码：

const geometry = new THREE.CircleGeometry(5, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const circle = new THREE.Mesh(geometry, material);
scene.add(circle);

ExtrudeGeometry 挤压几何体

从一个形状路径中，挤压出一个 BufferGeometry。官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#ExtrudeGeometry

示例代码：

const length = 12,
  width = 8;

const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, width);
shape.lineTo(length, width);
shape.lineTo(length, 0);
shape.lineTo(0, 0);

const extrudeSettings = {
  steps: 2,
  depth: 16,
  bevelEnabled: true,
  bevelThickness: 1,
  bevelSize: 1,
  bevelOffset: 0,
  bevelSegments: 1,
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

可以看到这个立方体是通过一个形状挤压生成的。

TubeGeometry 管道

TubeGeometry可以创建一个沿着三维曲线延伸的管道。官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#TubeGeometry

示例代码：

// 定义一个自定义的曲线路径类 CustomSinCurve (基于正弦曲线的路径)，继承自 THREE.Curve（用于创建曲线）
class CustomSinCurve extends THREE.Curve {
	constructor(scale = 1) {
		super(); // 调用父类 Curve 的构造函数
		this.scale = scale; // 自定义一个缩放参数，控制路径整体的大小
	}
	// 重写 getPoint 方法，定义曲线在参数 t（0 到 1）之间的每个点的位置
	getPoint(t, optionalTarget = new THREE.Vector3()) {
		const tx = t * 3 - 1.5; // x 方向线性变化：t 从 0 到 1 映射为 -1.5 到 +1.5
		const ty = Math.sin(2 * Math.PI * t); // y 方向是正弦曲线，形成波浪形
		const tz = 0; // z 保持为 0，曲线位于 XY 平面上
		// 设置目标点的坐标，并整体缩放
		return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
	}
}

// 创建一个路径对象，scale 设置为 10，即将整个路径放大 10 倍
const path = new CustomSinCurve(10);

// 创建一个沿着该路径生成的管道几何体（TubeGeometry）
// 参数依次为：路径、分段数、管道半径、管道圆截面的分段数、是否闭合
const geometry = new THREE.TubeGeometry(path, 20, 2, 8, false);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

ConeGeometry 圆锥

一个用于生成圆锥几何体的类。官方文档。

官方在线示例：https://threejs.org/docs/scenes/geometry-browser.html#ConeGeometry

示例代码：

const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

其他几何体

除了上面介绍到的，还有很多几何体，可以参考官方文档使用。