1. Three.js Geometry核心概念解析Three.js中的Geometry几何体是构建3D模型的基础数据结构它定义了模型的顶点位置、面片连接关系、UV坐标等核心属性。与BufferGeometry相比传统Geometry采用更直观的对象存储方式适合需要频繁修改顶点数据的场景。1.1 几何体组成要素一个完整的Geometry包含以下关键组成部分vertices顶点数组存储所有顶点的x/y/z坐标faces面片数组由三个或四个顶点索引组成的三角形或四边形面normals法向量数组定义每个面的朝向影响光照计算colors颜色数组为每个顶点或面指定颜色uvs纹理坐标数组将2D纹理映射到3D表面的坐标// 创建基础立方体几何体示例 const geometry new THREE.BoxGeometry(1, 1, 1); console.log(geometry.vertices); // 输出8个顶点坐标 console.log(geometry.faces); // 输出12个三角形面1.2 几何体类型体系Three.js提供多种预设几何体类型基础几何体BoxGeometry立方体、SphereGeometry球体、CylinderGeometry圆柱体复杂几何体TorusKnotGeometry环面纽结、IcosahedronGeometry二十面体路径几何体ExtrudeGeometry挤出几何体、LatheGeometry旋转几何体文字几何体TextGeometry3D文字提示在r125版本后Three.js推荐使用BufferGeometry替代Geometry以获得更好性能但传统Geometry在编辑操作上更为方便。2. 几何体高级操作技巧2.1 动态几何体修改通过程序化修改几何体顶点可以实现动态变形效果。以下是一个使几何体表面产生波浪效果的典型实现function animateWave(geometry, time) { const vertices geometry.vertices; for (let i 0; i vertices.length; i) { const vertex vertices[i]; // 根据顶点原始位置计算波浪位移 vertex.z Math.sin(vertex.x * 2 time) * 0.2; } geometry.verticesNeedUpdate true; // 必须标记顶点需要更新 }关键注意事项修改后必须设置verticesNeedUpdate true大量顶点修改时考虑使用BufferGeometry提高性能可结合noise算法生成更自然的有机形态2.2 几何体布尔运算通过CSG构造实体几何技术可以实现几何体的并集、差集和交集运算import { CSG } from three-csg-ts; const cube new THREE.Mesh(new THREE.BoxGeometry()); const sphere new THREE.Mesh(new THREE.SphereGeometry(0.7)); // 将网格转换为CSG对象 const cubeCSG CSG.fromMesh(cube); const sphereCSG CSG.fromMesh(sphere); // 执行布尔差集运算 const subtracted cubeCSG.subtract(sphereCSG); // 转换回Three.js网格 const resultMesh CSG.toMesh(subtracted, cube.matrix);3. 性能优化实战3.1 几何体合并技术使用BufferGeometryUtils合并相同材质的几何体可大幅提升渲染性能import { BufferGeometryUtils } from three/examples/jsm/utils/BufferGeometryUtils; const geometries []; for (let i 0; i 100; i) { const geometry new THREE.BoxGeometry(1, 1, 1); geometry.translate(Math.random() * 10, Math.random() * 10, 0); geometries.push(geometry); } const mergedGeometry BufferGeometryUtils.mergeBufferGeometries(geometries); const mesh new THREE.Mesh(mergedGeometry, material);优化效果对比几何体数量普通渲染合并后渲染性能提升1002.1ms0.8ms62%100018.7ms2.3ms88%3.2 实例化渲染对于大量重复几何体使用InstancedMesh可获得最佳性能const count 1000; const geometry new THREE.BoxGeometry(1, 1, 1); const material new THREE.MeshBasicMaterial(); const mesh new THREE.InstancedMesh(geometry, material, count); // 设置每个实例的位置和旋转 const matrix new THREE.Matrix4(); for (let i 0; i count; i) { matrix.setPosition(Math.random() * 100, Math.random() * 100, 0); mesh.setMatrixAt(i, matrix); }4. 高级应用案例4.1 参数化建模系统通过组合基础几何体创建复杂结构function createTower(levels, baseSize, height) { const group new THREE.Group(); for (let i 0; i levels; i) { const size baseSize * (1 - i/levels * 0.7); const geometry new THREE.CylinderGeometry(size, size*0.9, height/levels, 8); const floor new THREE.Mesh(geometry, material); floor.position.y i * (height/levels); group.add(floor); } return group; }4.2 动态地形生成使用噪声函数生成程序化地形import { ImprovedNoise } from three/examples/jsm/math/ImprovedNoise; function generateTerrain(width, depth, subdivisions) { const geometry new THREE.PlaneGeometry(width, depth, subdivisions, subdivisions); const noise new ImprovedNoise(); const vertices geometry.vertices; for (let i 0; i vertices.length; i) { const vertex vertices[i]; const x vertex.x / width; const y vertex.y / depth; vertex.z noise.noise(x * 10, y * 10, 0) * 2; } geometry.computeVertexNormals(); return geometry; }5. 常见问题解决方案5.1 几何体显示异常排查表问题现象可能原因解决方案模型显示为黑色法向量未计算调用geometry.computeVertexNormals()纹理拉伸变形UV坐标设置错误检查geometry.faceVertexUvs模型部分缺失面片顺序错误设置material.side THREE.DoubleSide性能严重下降顶点数过多使用简化几何体或LOD技术5.2 内存管理最佳实践及时销毁不再使用的几何体geometry.dispose(); // 释放GPU内存对于需要重复使用的几何体建议缓存起来避免重复创建使用Stats.js监控内存使用情况import Stats from three/examples/jsm/libs/stats.module; const stats new Stats(); stats.showPanel(0); // 显示内存面板 document.body.appendChild(stats.dom);在实际项目中Geometry的选择和优化需要根据具体场景权衡。对于静态场景优先使用BufferGeometry而对于需要频繁修改的动态几何体传统Geometry可能更便于操作。