一、Geometry核心概念
Three.js中的Geometry是构建3D物体的基础骨架，它通过顶点坐标、面片数据和UV映射等属性定义物体的几何形态。每个Geometry对象包含以下关键属性：
vertices：顶点坐标数组（三维向量集合）faces：面片数据（由顶点索引构成的三角面）faceVertexUvs：UV纹理坐标映射
以立方体创建为例：
const geometry = new THREE.BoxGeometry(5, 5, 5, 32, 32, 32);
// widthSegments参数控制细分程度，影响曲面平滑度
二、常见内置几何体详解
1. 基础几何体类型
| 几何体类型 | 关键参数 | 应用场景 |
|---|---|---|
| SphereGeometry | radius, segments | 球体/行星模型 |
| CylinderGeometry | radiusTop, radiusBottom | 圆柱/锥形物体 |
| TorusGeometry | radius, tubeRadius | 圆环/轮胎模型 |
2. 参数化建模示例
创建高精度球体：
const sphere = new THREE.SphereGeometry(
5, // 半径
64, // 经度分段数（影响纵向精度）
64, // 纬度分段数（影响横向精度）
Math.PI/4, // 起始经度角
Math.PI/2 // 经度跨度
);
三、BufferGeometry性能优化
传统Geometry与BufferGeometry的对比:
| 特性 | Geometry | BufferGeometry |
|---|---|---|
| 内存占用 | 较高 | 低30%-50% |
| 渲染性能 | 10k面片60fps | 100k面片60fps |
| 数据更新 | 直接属性修改 | 需标记needsUpdate |
| 适用场景 | 动态修改几何 | 静态/大场景 |
创建自定义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
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
四、高级自定义几何体开发
1. 传统Geometry自定义
构建五角星几何体：
const geometry = new THREE.Geometry();
// 顶点定义
geometry.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(Math.sin(θ)*R, Math.cos(θ)*R, 0)
);
// 面片构建
geometry.faces.push(new THREE.Face3(0, 2, 4));
geometry.computeFaceNormals(); // 自动计算法线
2. 动态几何更新
geometry.vertices[0].set(x, y, z);
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
五、性能优化实践
- 几何体合并
const mergedGeo = new THREE.Geometry();
objs.forEach(obj => {
obj.updateMatrix();
mergedGeo.merge(obj.geometry, obj.matrix);
});
- LOD技术应用
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(lowDetailMesh, 50);
六、调试与最佳实践
- 法线可视化
const helper = new THREE.FaceNormalsHelper(mesh, 2, 0xff0000);
scene.add(helper);
- 性能监控：
import Stats from 'stats.js';
const stats = new Stats();
document.body.appendChild(stats.dom);
更多three.js、cesium.js开源案例，请移至gitee.com/giser2017/t…
