关于 threejs-procedural-geometry
该技能指导基于明确尺寸、拓扑和装配约定构建 Three.js 程序化几何,适用于需要可复用网格构造方法与质量检查的创作者。
主要功能
- 01以多边形为先的建模流程
- 02程序化网格操作与 Three.js 输出
- 03拓扑与装配审计
- 04语义几何和间隙检查
- 05按命名部件装配并按材质槽合并
适用场景
- 01创建有尺寸约束的程序化模型
- 02检查开口、支撑和间隙
- 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.yamlassets/geometry-quality-kit/mesh-topology-audit.jsassembly.jsgeometry-audit.jsgeometry-contract.jsselftest.jsprocedural-mesh.jsexamples/formula-one-race-car/race-car-model.jsexamples/formula-one-race-car/source/design-contract.jsrace-car-materials.jsmesh-kit.jsrace-car-textures.jsrace-car-model.jsexamples/porcelain-brass-submarine/submarine-model.jsexamples/porcelain-brass-submarine/source/design-contract.jssubmarine-materials.jssubmarine-model.jsmesh-kit.jsexamples/procedural-optimus-humanoid/procedural-optimus-humanoid.jsexamples/procedural-optimus-humanoid/source/optimus-humanoid-system.jsexamples/sculpted-gallery-frame/frame-geometry.jsexamples/sport-motorcycle/motorcycle-model.jsexamples/sport-motorcycle/source/design-contract.jsmotorcycle-model.jsmesh-kit.jsmotorcycle-materials.jsreferences/complete-submarine-assembly.mdgeometry-craft-workflow.mdprofile-sweeps-and-mesh-writers.mdprocedural-optimus-humanoid-assembly.md详细介绍
程序化几何
根据语义契约和明确的坐标系生成几何体。 将多边形操作视为设计模型,将三角形输出视为最终编译步骤。只有在拓扑、 装配关系、语义测量和固定视图全部通过后,才能将对象视为完成。
此技能包含示范性示例和资产,内容不止是描述性指导;值得研读、参考,甚至直接复用。请在相关时充分利用它们,切勿盲目跳过。
建模循环
- 定义单位、局部/世界坐标系、尺寸、边界、主要轮廓、 拓扑意图、壳体厚度、开口、材质槽和三角形数量范围。
- 声明所有必需的接触、支撑、间隙、穿透、凹槽、运动包络和交互基准。
- 为每种可见形态选择建模操作:轮廓挤出、内嵌、放样、 旋转、扫掠、直接拓扑开口、实体化、细分、倒角或圆角。
- 设计阶段保留四边形和多边形面。每个语义部件保留一个命名网格;不要焊接无关部件,也不要合并材质槽。
- 按有意规划的顺序应用修改器,然后在每个部件内部清理、修正绕序、设置部件专属的平滑角度,并输出三角形。
- 通过多边形拓扑门槛检查,然后审查命名的世界装配体,检查共面重叠、缺陷和明显的实体冲突。
- 执行构建器负责的语义检查,包括支撑、开口、壳体厚度采样、人体工学间隙和运动极限。
- 按材质槽合并,再次审查,并检查固定轮廓、隐藏侧面、接合处、交互视图、线框、法线和掠射光效果。
建模标准
- 仅对真正简单或隐藏的结构部件使用基本体。
- 所有可见的制造边缘都应使用与比例相符的倒角或圆角。
- 将开口构建在一个封闭壳体中;不要在实体上叠放暗色平面。
- 使用成对轮廓或
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;随后,这些主题技能可以应用这些几何机制。