mcpField
T
threejs-geometries

threejs-geometries

github.com/full-stack-skills开发10379 次安装4 周前更新
代码仓库

关于 threejs-geometries

threejs-geometries 是用于构建和修改 three.js 几何体的技能,涵盖内置基元、自定义缓冲数据和形状挤出,并提供工作流与文档指引。

主要功能

  1. 01BufferGeometry 与属性
  2. 02基元几何体指引
  3. 03Shape 与路径挤出
  4. 04实例化属性指引
  5. 05几何体释放与常见问题

适用场景

  1. 01创建自定义网格
  2. 02挤出二维轮廓
  3. 03添加几何实例化数据
  4. 04排查法线或面绕序问题

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-geometries

安装后在 Claude Code 中输入/threejs-geometries确认已加载。

附带文件agents/openai.yamlexamples/workflow-extrude-shape.md

详细介绍

适用场景

用户提到以下内容时,始终使用此技能:

  • 构建或修改 BufferGeometry、属性、索引缓冲区、绘制范围
  • 通过 InstancedBufferAttribute / InstancedMesh 实现实例化(几何体相关内容;网格包装器请使用 threejs-objects)
  • 沿路径挤出 Shape、TubeGeometry、LatheGeometry、ExtrudeGeometry
  • 文本或贴花附加几何体

重要:几何体与数学

  • threejs-geometries = 可供 GPU 使用的三角形数据。
  • threejs-math = 不依赖网格拓扑的 Box3、Sphere、Ray 测试。

触发短语包括:

  • “BufferGeometry”、“BufferAttribute”、“ExtrudeGeometry”、“Shape”、“Curve”
  • “几何体”、“缓冲几何”、“挤出”、“文字几何”

如何使用此技能

  1. 如果内置基本几何体符合需求,优先使用它们,再考虑自定义缓冲区。
  2. 对于自定义网格:创建 BufferGeometry,设置 position、normal、uv 和可选的 index;计算包围体以进行剔除。
  3. 对于实例化属性,使 divisor/count 与 threejs-objects 中的 InstancedMesh 模式保持一致。
  4. 对于 2D 轮廓:构建 Shape/Path,根据文档进行挤出或旋转成形;参阅 Extras Curve 系列文档了解路径采样。
  5. 对于附加组件 NURBS 节点,请酌情参考 Addons Curves 页面——引用文档,不要复制完整 API。
  6. 替换网格时,释放几何体以避免内存泄漏。

参见 examples/workflow-extrude-shape.md。

文档索引(官方)

文档章节代表性链接
Corehttps://threejs.org/docs/BufferGeometry.html
Geometrieshttps://threejs.org/docs/BoxGeometry.html
Extrudehttps://threejs.org/docs/ExtrudeGeometry.html
Shapehttps://threejs.org/docs/Shape.html

范围

  • 涵盖范围: Core 几何体、缓冲区核心、曲线/形状/挤出工作流,以及部分附加组件几何体。
  • 不涵盖: 物理碰撞网格烘焙;完整的 CAD 导入流程。

常见问题与最佳实践

  • 缺少法线会影响光照;应一致地计算或导入法线。
  • 绕序错误会翻转面——检查侧面和剔除设置。
  • 属性数量过大时需要使用 LOD 或简化(附加组件中的修改器——仅在用户询问时提及)。

文档与版本

基本几何体和 BufferGeometry 位于 three.js 文档中的 Geometries 和 BufferGeometry 下。曲线、Shape 和挤出 API 位于 Extras 和 Geometries 下;Addons Curves / Geometries 文档介绍了 NURBS 和文本网格;请链接到这些文档,而不要复制冗长的签名。

Agent 回复检查清单

使用此技能回答时,优先采用以下做法:

  1. 根据需要链接到 BufferGeometry、基本几何体或 ExtrudeGeometry / Shape。
  2. 将实例化用法指向 threejs-objects,以了解 InstancedMesh 模式。
  3. 如果变形由时间驱动,将变形目标和轨道指向 threejs-animation。
  4. 合并/拆分时,仅通过名称和文档链接提及 BufferGeometryUtils(Addons Utils)。
  5. 替换大型自定义缓冲区时,强调使用 dispose()。

参考

关键词

English: buffergeometry, extrude, shape, path, curve, primitives, instancing, three.js

中文: 几何体、BufferGeometry、挤出、Shape、曲线、实例化、three.js

评论

支持 Markdown