用途:在 React Three Fiber 中构建几何体,包括普通形状、自定义缓冲区、实例化网格、点与线,并针对几何体做绘制调用优化。使用前应先检查已安装的 Three.js、Fiber 与 Drei 版本,再复制构造参数或辅助组件属性;示例面向 Fiber 9 / React 19 与 Three.js r185。
主要能力与选择:普通形状用原生 JSX 几何,args 对应 Three.js 构造函数,改变 args 会重建几何体,因此应动画化变换而非构造参数。自定义拓扑用 BufferGeometry,大规模粒子用基于缓冲区的点。声明式实例可用 Drei Instances,便于事件处理;规模大或频繁更新时改用原生实例化以减少每实例的 React 开销。实例化共享几何体与材质并减少绘制调用,仅共享几何体不会批处理绘制。Drei Merged 从网格创建实例化抽象,不拼接任意静态几何体;真正合并需查看 three/addons/utils/BufferGeometryUtils.js 的 mergeGeometries,并确保属性与索引兼容。
用法要点:声明式实例需挂载在 Canvas 下并配灯光,每个 Instance 属于最近的 Instances 提供者。自定义缓冲区中 position 与 normal 通常 item size 为 3,UV 为 2,用 args={[typedArray, itemSize]} 与正确的 attach 构造。索引指向顶点,绕序决定正面;硬法线或 UV 接缝处需复制顶点。受光几何体需要法线,可用 computeVertexNormals(),但不要每帧重算。CPU 写入缓冲区后设置 attribute.needsUpdate = true,频繁变化应在首次 GPU 上传前选择动态用法。几何体变化影响包围盒/球时需重算;GPU 顶点位移不会自动更新 CPU 边界或射线检测。现代 Three.js 中 UV 选择显式通过 texture.channel 指定 uv、uv1、uv2 或 uv3。避免为指针移动重建缓冲区,拓扑固定时改属性内容或 uniform。
辅助与权衡:Drei Line 支持有用线宽,原生 WebGL 线宽受平台限制,选择屏幕空间或世界空间厚度时检查 worldUnits。平面文字用 Drei Text,挤出几何用 Text3D;当前 TextGeometry 使用 depth 而非历史上的 height。Edges 用于锐边轮廓,不替代屏幕空间选择效果。Bounds 与 Center 改变取景/变换,需决定是否在资源加载、缩放或交互后更新。段数应依据轮廓、形变与观看距离,固定“高质量”段数并非总是更好。声明式创建的几何体可由 R3F 管理;共享或缓存几何体需共享生命周期,不要在其他实例仍挂载时从某一实例销毁。
验证与限制:更新后检查边界/剔除、射线命中位置、资源清理与绘制调用;应在目标对象数量下测试,三个实例不能证明一万个实例的性能。资料未提供收费、价格、平台与具体效果信息。