1.3几何体 (Geometries)

文档摘要

1.3几何体 (Geometries) Three.js 几何体 (Geometries) 详解在 Three.js 中，几何体 (Geometries) 是构建 3D 模型的基础。它们定义了物体的形状，由顶点 (vertices)、面 (faces) 和其他几何数据组成。Three.js 提供了多种内置几何体，同时也允许你自定义几何体。基础概念顶点 (Vertices): 构成几何体的基本点，定义了物体在 3D 空间中的位置。每个顶点通常由 x、y 和 z 坐标表示。面 (Faces): 连接顶点形成的面，定义了物体的表面。最常见的面是三角形面，由三个顶点组成。法线 (Normals): 垂直于面的向量，用于计算光照效果。

1.3几何体 (Geometries)

Three.js 几何体 (Geometries) 详解

在 Three.js 中，几何体 (Geometries) 是构建 3D 模型的基础。它们定义了物体的形状，由顶点 (vertices)、面 (faces) 和其他几何数据组成。Three.js 提供了多种内置几何体，同时也允许你自定义几何体。

1. 基础概念

顶点 (Vertices): 构成几何体的基本点，定义了物体在 3D 空间中的位置。每个顶点通常由 x、y 和 z 坐标表示。
面 (Faces): 连接顶点形成的面，定义了物体的表面。最常见的面是三角形面，由三个顶点组成。
法线 (Normals): 垂直于面的向量，用于计算光照效果。
UV 坐标 (UV Coordinates): 用于将纹理映射到几何体表面的坐标。

2. 内置几何体

Three.js 提供了丰富的内置几何体，可以满足大部分建模需求。

2.1. 盒子几何体 (BoxGeometry)

BoxGeometry 用于创建立方体或长方体。


const geometry = new THREE.BoxGeometry(width, height, depth); // 宽度，高度，深度
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

参数详解：

width: 盒子在 X 轴上的宽度。
height: 盒子在 Y 轴上的高度。
depth: 盒子在 Z 轴上的深度。
widthSegments: 可选参数，宽度方向上的分段数，默认为 1。
heightSegments: 可选参数，高度方向上的分段数，默认为 1。
depthSegments: 可选参数，深度方向上的分段数，默认为 1。分段数越高，表面越平滑，但也会增加计算量。

代码实践：


const geometry = new THREE.BoxGeometry(2, 4, 6, 4, 8, 12); // 宽度2，高度4，深度6，分段数分别为4,8,12
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }); // 使用线框模式查看分段
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2.2. 球体几何体 (SphereGeometry)

SphereGeometry 用于创建球体。


const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments); // 半径，宽度分段数，高度分段数
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

参数详解：

radius: 球体的半径。
widthSegments: 水平方向上的分段数，数值越大，球体越平滑。
heightSegments: 垂直方向上的分段数，数值越大，球体越平滑。
phiStart: 可选参数，水平起始角度，弧度制，默认为 0。
phiLength: 可选参数，水平扫描角度，弧度制，默认为 Math.PI * 2。
thetaStart: 可选参数，垂直起始角度，弧度制，默认为 0。
thetaLength: 可选参数，垂直扫描角度，弧度制，默认为 Math.PI。

代码实践：


const geometry = new THREE.SphereGeometry(3, 32, 16, 0, Math.PI, 0, Math.PI / 2); // 创建半球
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

2.3. 平面几何体 (PlaneGeometry)

PlaneGeometry 用于创建平面。


const geometry = new THREE.PlaneGeometry(width, height); // 宽度，高度
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); // 设置双面显示
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

参数详解：

width: 平面的宽度。
height: 平面的高度。
widthSegments: 可选参数，宽度方向上的分段数，默认为 1。
heightSegments: 可选参数，高度方向上的分段数，默认为 1。

代码实践：


const geometry = new THREE.PlaneGeometry(10, 10, 10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide, wireframe: true });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2; // 旋转平面，使其水平
scene.add(plane);

2.4. 圆柱几何体 (CylinderGeometry)

CylinderGeometry 用于创建圆柱体。


const geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments); // 顶部半径，底部半径，高度，径向分段数，高度分段数
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

参数详解：

radiusTop: 顶部圆的半径。
radiusBottom: 底部圆的半径。
height: 圆柱体的高度。
radialSegments: 径向的分段数，数值越大，圆柱体越平滑。
heightSegments: 高度方向上的分段数，数值越大，圆柱体表面越平滑。
openEnded: 可选参数，是否开放两端，默认为 false。
thetaStart: 可选参数，起始角度，弧度制，默认为 0。
thetaLength: 可选参数，扫描角度，弧度制，默认为 Math.PI * 2。

代码实践：


const geometry = new THREE.CylinderGeometry(2, 4, 6, 32, 4, false, 0, Math.PI); // 创建半圆柱
const material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true });
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

2.5. 圆锥几何体 (ConeGeometry)

ConeGeometry 用于创建圆锥体。


const geometry = new THREE.ConeGeometry(radius, height, radialSegments, heightSegments); // 半径，高度，径向分段数，高度分段数
const material = new THREE.MeshBasicMaterial({ color: 0xff00ff });
const cone = new THREE.Mesh(geometry, material);
scene.add(cone);

参数详解：

radius: 底部圆的半径。
height: 圆锥体的高度。
radialSegments: 径向的分段数，数值越大，圆锥体越平滑。
heightSegments: 高度方向上的分段数，数值越大，圆锥体表面越平滑。
openEnded: 可选参数，是否开放底部，默认为 false。
thetaStart: 可选参数，起始角度，弧度制，默认为 0。
thetaLength: 可选参数，扫描角度，弧度制，默认为 Math.PI * 2。

2.6. 圆环几何体 (TorusGeometry)

TorusGeometry 用于创建圆环。


const geometry = new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments); // 半径，管道半径，径向分段数，管状分段数
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

参数详解：

radius: 圆环的半径，从圆环的中心到管道的中心的距离。
tube: 管道的半径。
radialSegments: 径向的分段数，数值越大，圆环越平滑。
tubularSegments: 管状的分段数，数值越大，管道越平滑。
arc: 可选参数，圆环的弧度，默认为 Math.PI * 2。

2.7. 圆环缓冲几何体 (TorusKnotGeometry)

TorusKnotGeometry 用于创建圆环结。


const geometry = new THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

2.8. 文本几何体 (TextGeometry)

TextGeometry 用于创建 3D 文本。需要加载字体文件。


const loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
	const geometry = new THREE.TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelOffset: 0,
		bevelSegments: 5
	} );
    const material = new THREE.MeshBasicMaterial({color: 0xffffff});
    const text = new THREE.Mesh(geometry, material);
    scene.add(text);
} );

3. 自定义几何体

如果内置几何体无法满足你的需求，你可以创建自定义几何体。

3.1. 使用 `THREE.BufferGeometry`

THREE.BufferGeometry 是一种高效的几何体表示方法，它将顶点数据存储在缓冲区中，可以减少内存占用并提高渲染性能。


const geometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
   1.0,  1.0,  1.0,
  1.0,  1.0,  1.0,
  -1.0,  1.0,  1.0,
  -1.0, -1.0,  1.0
]);
// 创建顶点属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

代码解释：

创建 THREE.BufferGeometry 实例。
创建 Float32Array 类型的数组，用于存储顶点坐标。每个顶点由三个浮点数表示 (x, y, z)。
使用 geometry.setAttribute() 方法将顶点数据绑定到几何体的 "position" 属性。THREE.BufferAttribute 的第一个参数是顶点数据数组，第二个参数是每个顶点包含的元素数量 (在本例中为 3，表示 x, y, z 坐标)。
创建材质并使用几何体和材质创建网格。

3.2. 创建平面几何体

下面是一个创建自定义平面几何体的例子：


const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
    -1.0, -1.0,  0.0,
     1.0, -1.0,  0.0,
     1.0,  1.0,  0.0,
    -1.0, -1.0,  0.0,
     1.0,  1.0,  0.0,
    -1.0,  1.0,  0.0
] );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );

4. 几何体的常用属性和方法

vertices: 存储顶点坐标的数组。 (注意：不适用于BufferGeometry)
faces: 存储面信息的数组。 (注意：不适用于BufferGeometry)
computeVertexNormals(): 计算顶点法线。
computeFaceNormals(): 计算面法线。
translate(x, y, z): 平移几何体。
rotateX(angle): 绕 X 轴旋转几何体。
rotateY(angle): 绕 Y 轴旋转几何体。
rotateZ(angle): 绕 Z 轴旋转几何体。
scale(x, y, z): 缩放几何体。

5. 总结

几何体是 Three.js 中构建 3D 模型的基础。掌握内置几何体的用法和自定义几何体的创建方法，可以帮助你创建各种复杂的 3D 场景。BufferGeometry 是一个高效的几何体表示方法，适用于大型模型和高性能渲染。

希望这篇文章能够帮助你更好地理解 Three.js 中的几何体。

流程图示例 (使用 Mermaid):

这个流程图展示了创建 Three.js 几何体的基本流程，包括选择内置几何体或自定义几何体，以及创建材质和网格的过程。

这篇文章提供了 Three.js 几何体的详细介绍，包括内置几何体的用法、自定义几何体的创建方法以及常用属性和方法。希望能够帮助你更好地理解和使用 Three.js。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/220-threejs-3d%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流

1.3几何体 (Geometries)

文档摘要