mcpField
T
threejs-procedural-geometry

threejs-procedural-geometry

github.com/scottstts创意与媒体951106 次安装1 周前更新
代码仓库

关于 threejs-procedural-geometry

该技能指导基于明确尺寸、拓扑和装配约定构建 Three.js 程序化几何,适用于需要可复用网格构造方法与质量检查的创作者。

主要功能

  1. 01以多边形为先的建模流程
  2. 02程序化网格操作与 Three.js 输出
  3. 03拓扑与装配审计
  4. 04语义几何和间隙检查
  5. 05按命名部件装配并按材质槽合并

适用场景

  1. 01创建有尺寸约束的程序化模型
  2. 02检查开口、支撑和间隙
  3. 03按材质槽合并前审计网格

安装

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

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-procedural-geometry

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

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/geometry-quality-kit/
mesh-topology-audit.js
assembly.js
geometry-audit.js
geometry-contract.js
selftest.js
procedural-mesh.js
examples/formula-one-race-car/
race-car-model.js
examples/formula-one-race-car/source/
design-contract.js
race-car-materials.js
mesh-kit.js
race-car-textures.js
race-car-model.js
examples/porcelain-brass-submarine/
submarine-model.js
examples/porcelain-brass-submarine/source/
design-contract.js
submarine-materials.js
submarine-model.js
mesh-kit.js
examples/procedural-optimus-humanoid/
procedural-optimus-humanoid.js
examples/procedural-optimus-humanoid/source/
optimus-humanoid-system.js
examples/sculpted-gallery-frame/
frame-geometry.js
examples/sport-motorcycle/
motorcycle-model.js
examples/sport-motorcycle/source/
design-contract.js
motorcycle-model.js
mesh-kit.js
motorcycle-materials.js
references/
complete-submarine-assembly.md
geometry-craft-workflow.md
profile-sweeps-and-mesh-writers.md
procedural-optimus-humanoid-assembly.md

详细介绍

程序化几何

根据语义契约和明确的坐标系生成几何体。 将多边形操作视为设计模型,将三角形输出视为最终编译步骤。只有在拓扑、 装配关系、语义测量和固定视图全部通过后,才能将对象视为完成。

此技能包含示范性示例和资产,内容不止是描述性指导;值得研读、参考,甚至直接复用。请在相关时充分利用它们,切勿盲目跳过。

建模循环

  1. 定义单位、局部/世界坐标系、尺寸、边界、主要轮廓、 拓扑意图、壳体厚度、开口、材质槽和三角形数量范围。
  2. 声明所有必需的接触、支撑、间隙、穿透、凹槽、运动包络和交互基准。
  3. 为每种可见形态选择建模操作:轮廓挤出、内嵌、放样、 旋转、扫掠、直接拓扑开口、实体化、细分、倒角或圆角。
  4. 设计阶段保留四边形和多边形面。每个语义部件保留一个命名网格;不要焊接无关部件,也不要合并材质槽。
  5. 按有意规划的顺序应用修改器,然后在每个部件内部清理、修正绕序、设置部件专属的平滑角度,并输出三角形。
  6. 通过多边形拓扑门槛检查,然后审查命名的世界装配体,检查共面重叠、缺陷和明显的实体冲突。
  7. 执行构建器负责的语义检查,包括支撑、开口、壳体厚度采样、人体工学间隙和运动极限。
  8. 按材质槽合并,再次审查,并检查固定轮廓、隐藏侧面、接合处、交互视图、线框、法线和掠射光效果。

建模标准

  • 仅对真正简单或隐藏的结构部件使用基本体。
  • 所有可见的制造边缘都应使用与比例相符的倒角或圆角。
  • 将开口构建在一个封闭壳体中;不要在实体上叠放暗色平面。
  • 使用成对轮廓或 solidify 构建厚壳;若外露边缘会显露厚度,绝不能依赖单一表面。
  • 配合部件应由同一基准驱动。后期为视觉效果做微调,就意味着尺寸契约未通过。
  • 连续制造形态应使用连续网格。用相交基本体拼出的结构不能替代建模。
  • 仅对结构上有意设计的交叉保留狭窄且明确命名的余量。

阅读 references/geometry-craft-workflow.md,了解以多边形为先的建模语法、修改器顺序、连接面下限、细节预算、固定视觉审查契约,以及几何建模失败诊断。

阅读 references/geometry-quality-gates.md,了解精确的拓扑、共面、实体冲突、语义、支撑、间隙、运动包络和视觉门槛,以及以米为尺度的容差。

可移植的 JavaScript 工具包

如果 Three.js 项目缺少同类建模和质量检查层,请将完整的 assets/geometry-quality-kit/ 目录放入项目中。 根据需要调整导入路径和场景配置;保留几何体和审计契约。

  • procedural-mesh.js 提供 MeshData、多边形清理、绕序重建、轮廓、偏移、拉伸、放样、旋转体、扫掠、实体化、细分、倒角、孔洞、 平滑角度法线、材质槽构建和 Three.js 输出。
  • mesh-topology-audit.js 检查游离/重复顶点、退化元素、开放/非流形边、分离组件、有符号体积,以及输出的位置/法线。
  • geometry-audit.js 审计已构建的 Object3D 层级,检查真正被裁剪的共面重叠、无效网格数据、缺失材质,以及大面积三角形交叉冲突。
  • geometry-contract.js 运行对象专属测量,不强加项目专属的形状语义。
  • assembly.js 保留命名部件以供审计,然后在各项门槛通过后,为每个材质槽构建一个绘制网格。
  • selftest.js 注入已知缺陷,并验证建模、拓扑、契约、装配、Z 冲突和交叉冲突检查流程;放入或调整工具包后运行此脚本。

机制参考与实现

阅读 references/profile-sweeps-and-mesh-writers.md,了解精确的雕塑感框架轮廓、导轨生成、树木年轮、语义网格写入器及其已观察到的缩放限制。

查看 雕塑感画廊框架几何,了解轮廓扫掠、类斜接导轨映射、明确的端盖归属、PBR 表面组合、掠射高光、选择性泛光及几何诊断。

阅读 references/complete-submarine-assembly.md,了解精确的尺寸对象契约、共享放样/扫掠内核、由 UV 定义的开口、语义子装配、生成的配件及模型诊断。

查看 瓷器与黄铜潜艇模型,了解完整装配,其中包含倾斜领圈船体放样、平行移动饰边、配备内饰的玻璃舱、带护罩螺旋桨、透镜截面鳍片,以及各部件的三角形证据。

阅读 references/vehicle-loft-and-projector-contract.md,了解参数曲线截面轨迹、凹槽开口截面、超椭圆体积、翼展方向翼型放样、扭曲板、投影器归属、受载变形轮胎及测量限制。

查看 一级方程式赛车模型,了解单一连续车身放样、由截面定义的驾驶舱凹槽、真实进气口、翼展方向机翼放样、涂装投影,以及接触变形轮胎。

查看 运动摩托车模型,了解带槽标签的生成、旋转与直立框架扫掠、偏移面板外壳、辐条车轮、悬垂链条路径,以及经过体积审计的装配。

阅读 references/procedural-optimus-humanoid-assembly.md,了解完整人形机器人在坐标、多边形/修改器、曲线、放样、脊柱、枕状体、CSG、倒角、语义装配、筛选材质、生成、限制及诊断方面的精确契约。

查看 程序化 Optimus 人形机器人条目及其完整的几何与材质系统,了解一个包含 176 个对象的躯干/头部/手臂/手部/髋部/腿部/足部装配。该装配具有五指双手、生成 891,809 个三角形、14 种 PBR 标识、精确多边形切割、角度限制倒角、分离的角点法线,以及经过导数筛选的对象空间粗糙度与凹凸效果。

查看 程序化金融塔编译器,了解面向建筑尺度的语义放置编译与材质槽实例化。

失败条件

  • 可见尺度下仍存在朝向相同且共面的三角形;
  • 孤立顶点、退化面、开放实体、非流形边、分离组件、无效法线或朝内的闭合体积进入生成阶段;
  • 实质上无关的实体相交,或放置的部件缺少声明的支撑/接触关系;
  • 外露外壳薄如纸片,或开口只是视觉叠加;
  • 可见基本体仍有刀刃般锐利的边缘,或与另一个基本体连接时没有经过设计的过渡;
  • 轮廓框架翻转、端盖与侧面共用平滑法线,或 UV 密度随线段数量变化;
  • 在命名部件审计前就合并材质;
  • 仅以三角形数量作为复杂度证据;
  • 脚本通过,但固定视角检查仍发现建模不合理。
  • 完整人形机器人被简化为相交的胶囊体和方盒;
  • 镜像手部或肢体的绕序仍朝内;
  • 未经足迹筛选便生成高频对象空间材质噪声。

路由边界

本技能负责可复用的网格构建和几何质量。若表面特征是重点,请使用 $threejs-procedural-materials;若涉及建筑语法,请使用 $threejs-procedural-architecture;若涉及生长层级,请使用 $threejs-procedural-vegetation;随后,这些主题技能可以应用这些几何机制。

评论

支持 Markdown