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詳細
プロシージャルジオメトリ
セマンティックな契約と明示的な座標系に基づいてジオメトリを生成します。 ポリゴン操作を設計モデルとして扱い、三角形の出力は最終的なコンパイル工程とします。トポロジー、アセンブリの関係、セマンティックな測定値、固定ビューのすべてに合格するまでは、オブジェクトを完成と見なさないでください。
このスキルには、説明的なガイダンスに加えて、模範的なサンプルやアセットが含まれています。調べたり、参照したり、場合によってはコピーしたりする価値があります。関連する場合は十分に活用し、むやみに読み飛ばさないでください。
制作ループ
- 単位、ローカル/ワールド座標系、寸法、境界、主要プロファイル、トポロジーの意図、シェルの厚さ、開口部、マテリアルスロット、三角形数の範囲を定義します。
- 必要な接触、支持、クリアランス、貫通、段差、可動範囲、インタラクションの基準点をすべて宣言します。
- 目に見える形状ごとに、プロファイル押し出し、インセット、ロフト、回転、スイープ、直接トポロジーによる開口、ソリッド化、サブディビジョン、ベベル、フィレットのいずれかのモデリング操作を選択します。
- 設計中はクワッドと N ゴンを維持します。セマンティックなパーツごとに名前付きメッシュを 1 つ維持し、無関係なパーツを溶接したり、マテリアルスロットをまだ結合したりしないでください。
- モディファイアを意図的な順序で適用し、各パーツ内をクリーンアップして、面の向きを修正し、パーツごとにスムージング角度を設定してから、三角形を出力します。
- ポリゴントポロジーのゲートを実行し、名前付きのワールドアセンブリについて、コプラナーな重なり、欠陥、大規模なソリッドの衝突を監査します。
- ビルダーが所有するセマンティックチェックを実行します。これには、支持、開口部、シェル厚さのサンプル、エルゴノミクス上のクリアランス、可動範囲の極値が含まれます。
- マテリアルスロットごとに結合して再度監査し、固定シルエット、隠れた面、接合部、インタラクションビュー、ワイヤーフレーム、法線、かすめる光を確認します。
モデリングの基準
- プリミティブは、本当にプリミティブなパーツや隠れた構造パーツに限って使用します。
- 目に見える製造エッジには、スケールに合ったベベルまたはフィレットを施します。
- 開口部は 1 つの閉じたシェルに作り込みます。ソリッドの上に暗い平面を重ねないでください。
- 厚みのあるシェルは、対になるプロファイルまたは
solidifyで構築します。露出したリムで厚みが見える場所に、単一のサーフェスだけを頼らないでください。 - 嵌合するパーツは同じ基準点から作成します。後から見た目を微調整するのは、寸法契約に違反しています。
- 連続した製造形状には、連続したメッシュを選びます。プリミティブを交差させて配置しても、モデリングの代わりにはなりません。
- 構造上意図された交差に限り、幅の狭い名前付きの許容差を維持します。
references/geometry-craft-workflow.md を読み、ポリゴン優先のモデリング文法、モディファイアの順序、接合部の最低基準、ディテールの予算、固定されたビジュアルレビューの契約、ジオメトリ制作の失敗診断を確認してください。
references/geometry-quality-gates.md を読み、メートルスケールの許容差を含む、厳密なトポロジー、コプラナー、ソリッド衝突、セマンティック、支持、クリアランス、モーション範囲、ビジュアルの各ゲートを確認してください。
ポータブル JavaScript キット
プロジェクトに同等のモデリングおよび品質レイヤーがない場合は、assets/geometry-quality-kit/ ディレクトリ全体を Three.js
プロジェクトに配置します。必要に応じてインポートパスとシーンの配線を調整し、ジオメトリと
監査の契約は維持してください。
- procedural-mesh.js は、
MeshData、ポリゴンのクリーンアップ、巻き順の再構築、プロファイル、オフセット、 押し出し、ロフト、回転体、スイープ、ソリッド化、細分割、ベベル、開口部、 スムーズ角度法線、マテリアルスロットの構築、Three.js への出力を提供します。 - mesh-topology-audit.js は、孤立頂点/重複頂点、縮退、開いた辺/非多様体辺、分離したコンポーネント、 符号付き体積、および出力された頂点位置/法線を検査します。
- geometry-audit.js は、構築済みの
Object3D階層を監査し、実際にクリップされた同一平面上の重なり、不正なメッシュデータ、 マテリアルの欠落、大規模な三角形交差による衝突を検出します。 - geometry-contract.js は、プロジェクト固有の形状セマンティクスを強制せずに、オブジェクト固有の計測を実行します。
- assembly.js は、監査用に名前付きパーツを保持し、 その後、ゲートを通過したらマテリアルスロットごとに 1 つの描画メッシュを構築します。
- selftest.js は、既知の欠陥を仕込み、 モデリング、トポロジー、契約、アセンブリ、Z ファイト、衝突の各経路を検証します。キットの配置または適用後に実行してください。
メカニズムのリファレンスと実装
references/profile-sweeps-and-mesh-writers.mdを読み、正確なスカルプトフレームのプロファイル、レールの出力、年輪、セマンティックメッシュライター、および確認されているスケーリング上の限界を確認してください。
スカルプトギャラリーフレームのジオメトリを読み、プロファイルスイープ、留め継ぎ風のレールマッピング、意図的なキャップの所有権、PBR サーフェスバンドル、かすめるようなハイライト、選択的ブルーム、ジオメトリ診断を確認してください。
references/complete-submarine-assembly.mdを読み、正確な寸法付きオブジェクトコントラクト、共有ロフト/スイープカーネル、UV が所有する開口部、セマンティックなサブアセンブリ、生成された継手、モデル診断を確認してください。
磁器と真鍮の潜水艦モデルを読み、傾斜したカラーを備えた船体ロフト、平行移動トリム、家具付きのガラスキャビン、シュラウド付きプロペラ、レンズ断面のフィン、パーツごとの三角形数の根拠を備えた完全なアセンブリを確認してください。
references/vehicle-loft-and-projector-contract.mdを読み、パラメーター曲線による断面トラック、凹部開口部の断面、スーパー楕円体ボリューム、翼幅方向の翼型ロフト、ワーププレート、プロジェクターの所有権、荷重でたわむタイヤ、測定された限界を確認してください。
Formula One レースカーモデルを読み、連続した単一のボディロフト、断面が所有するコックピットの凹部、実際の吸気口開口部、翼幅方向のウィングロフト、リバリーの投影、接地荷重でたわむタイヤを確認してください。
スポーツモーターバイクモデルを読み、スロットタグ付きの出力、回転および直立フレームのスイープ、オフセットされたパネルシェル、スポークホイール、垂れ下がるチェーンの経路、ボリューム監査済みアセンブリを確認してください。
references/procedural-optimus-humanoid-assembly.mdを読み、実物大のロボット全体について、正確な座標、ポリゴン/モディファイアー、曲線、ロフト、背骨、クッション、CSG、ベベル、セマンティックアセンブリ、フィルター処理されたマテリアル、エミッション、制限、診断の各コントラクトを確認してください。
プロシージャル Optimus ヒューマノイドのエントリーと、その完全なジオメトリおよびマテリアルシステムを読み、176 個のオブジェクトからなる胴体/頭/腕/手/腰/脚/足のアセンブリを確認してください。5 本指の手、出力される 891,809 個の三角形、14 種類の PBR ID、正確なポリゴンカット、角度制限付きベベル、分割コーナー法線、微分フィルター処理されたオブジェクト空間の粗さとバンプを備えています。
プロシージャル金融タワーコンパイラーを読み、建築物規模でのセマンティックな配置コンパイルとマテリアルスロットのインスタンス化を確認してください。
失敗条件
- 同じ向きの共面三角形が、目視できる規模で残っている;
- 浮いた頂点、縮退した面、開いたソリッド、非多様体エッジ、分離したコンポーネント、無効な法線、または内向きの閉じたボリュームが出力される;
- 実質的に無関係なソリッド同士が交差している、または配置されたパーツに宣言済みの支持/接触関係がない;
- 露出したシェルが紙のように薄い、または開口部が視覚的なオーバーレイにすぎない;
- 目に見えるプリミティブのエッジがかみそりのように鋭いままである、または設計されたトランジションなしに別のプリミティブと接続されている;
- プロファイルフレームが反転する、キャップが側面のスムーズ法線を共有する、またはセグメント数によって UV 密度が変化する;
- 名前付きパーツの監査前にマテリアルの統合が行われる;
- 複雑さを示す根拠が三角形数だけである;
- スクリプトは通るが、固定視点での確認で依然として不自然なモデリングが見つかる。
- 完全なヒューマノイドが、交差するカプセルとボックスに簡略化されている;
- ミラーリングされた手や四肢の巻き順が内向きのままである;
- フットプリントフィルタリングなしで高周波のオブジェクト空間マテリアルノイズが出力される。
ルーティングの境界
このスキルは、再利用可能なメッシュ構築とジオメトリの品質を担当します。表面の特徴が主題の場合は $threejs-procedural-materials を、建築の文法の場合は $threejs-procedural-architecture を、成長の階層構造の場合は $threejs-procedural-vegetation を使用してください。これらの主題別スキルでは、その後、これらのジオメトリの仕組みを適用できます。