Three.js - 几何体

Three.js - 几何体

几何体是任何 3D 对象的构建块，通过顶点、面和其他数据的集合定义其形状和结构。Three.js 提供了一套丰富的内置几何体，可以轻松创建常见形状，从简单的平面到复杂的扭结形状。

Three.js 中所有标准几何体都建立在高度优化的 BufferGeometry 类之上，该类以高效的数据缓冲区存储顶点position、面索引、法线和 UV 等数据。

常用内置几何体

几何体	描述
BoxGeometry	创建长方体（盒子）。参数定义其 width、height 和 depth，以及每个轴上的可选分段。
SphereGeometry	创建球体。参数定义其 radius，以及水平分段数 (widthSegments) 和垂直分段数 (heightSegments)，它们控制球体的平滑度。
PlaneGeometry	创建一个简单的 2D 平面。适用于地板、墙壁或作为纹理的基础。
CylinderGeometry	创建圆柱体。您可以通过指定不同的顶部和底部半径（radiusTop、radiusBottom）来创建锥形。
TorusGeometry	创建圆环体（甜甜圈形状）。由圆环的 radius 和 tube 半径定义。
TorusKnotGeometry	创建更复杂的打结圆环体形状。非常适合创建有趣的抽象形式。
CircleGeometry	创建一个简单的平面 2D 圆形。适用于 UI 元素或简单形状。
TextGeometry	[高级] 从字体文件创建 3D 文本。需要加载特殊的 JSON 字体文件，并且是 Three.js 插件的一部分。

代码示例：创建包含多种几何体的场景

import * as THREE from 'three';

// 场景设置（相机、渲染器等）已省略
const scene = new THREE.Scene();

// 创建一个在所有网格之间共享的材质
const material = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    roughness: 0.5
});

// 1. 长方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(boxGeometry, material);
cube.position.x = -2;
scene.add(cube);

// 2. 球体几何体（使用更多分段以获得平滑度）
const sphereGeometry = new THREE.SphereGeometry(0.7, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = 0;
scene.add(sphere);

// 3. 圆环体几何体
const torusGeometry = new THREE.TorusGeometry(0.5, 0.2, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 2;
scene.add(torus);

性能与最佳实践

• 分段至关重要：几何体中的分段数（例如 SphereGeometry 中的 widthSegments）直接影响性能。高多边形模型看起来平滑，但计算成本高昂。对于距离较远或不太重要的对象，请使用较低的分段数。
• 实例化：如果您需要渲染许多相同的对象（例如，一片树林），请使用 InstancedMesh 而不是创建数千个单独的 Mesh 对象。这通过减少绘图调用显著提高了性能。
• BufferGeometry：为了获得最大性能或自定义形状，您可以直接使用 BufferGeometry 来定义自己的顶点和属性。这是一个高级主题，但它是以编程方式创建高度优化和独特 3D 模型的关键。
• 清理：当您使用完一个几何体并且它不再在场景中时，调用 geometry.dispose() 以释放其在 GPU 上的内存。

要探索所有可用的几何体及其参数，请查阅 Three.js 官方文档。