mcpField
T
threejs-geometry

threejs-geometry

github.com/cesartevisual開発11348 回インストール7 週間前に更新
リポジトリ

threejs-geometry について

Three.js プロジェクトでジオメトリとインスタンシングを扱うコーディングスキルです。既存のバージョンと構成に沿って、選択、更新、検証の手順を案内します。

主な機能

  1. 01組み込み・カスタム・インスタンス化ジオメトリの選択
  2. 02インデックスと頂点属性の管理
  3. 03動的バッファと境界の更新
  4. 04インスタンス ID、変換、色の管理
  5. 05ライティング、カリング、継ぎ目、ピッキングの検証

活用シーン

  1. 01カスタム形状や反復形状の作成
  2. 02レンダリング中のジオメトリ更新
  3. 03インスタンス単位の選択とピッキング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/cesartevisual/threejs-skills --skill threejs-geometry

インストール後、Claude Code で/threejs-geometryを入力して読み込まれたか確認します。

詳細

ジオメトリとインスタンシング

プロジェクトにインストールされているバージョンと既存のアーキテクチャを使用してください。これらの指示はユーザーのタスクを補足するものであり、無関係な変更や外部での操作を許可するものではありません。

単純な形状には組み込みジオメトリ、独自のトポロジーには BufferGeometry、繰り返し使うジオメトリとマテリアルの組み合わせにはインスタンシングを選んでください。トポロジーの密度は、任意に高いセグメント数ではなく、シルエットと変形に応じて決めてください。

インデックス付きデータとインデックスなしデータを意図的に使い分けてください。アトリビュートの頂点数は一致させる必要があります。三角形の頂点順序は表面の向きを決定します。UV シームやハード法線には、頂点の複製が必要になる場合があります。必要に応じて、トポロジーの変更後に法線を再計算してください。法線だけでは、欠落した UV や接線は生成されません。

動的アトリビュートでは、あらかじめ容量を確保し、初回レンダリング前に使用方法を選択してから、型付き配列を変更し、needsUpdate を設定してください。部分的な書き込みには、サポートされている更新範囲を使用してください。カリングやピッキングに影響する変更を行った後は、境界ボリュームを更新してください。バウンディングボックスが、常に正確な衝突形状になるとは限りません。

InstancedMesh を使用する場合は、インスタンス ID とアプリケーション ID の対応関係を安定して維持してください。インスタンスの行列と色を更新し、それぞれの needsUpdate フラグを設定してください。インスタンスの変換後は、境界を再計算してください。巨大な境界によってカリングの効果が損なわれる場合は、大規模なインスタンス群を空間ごとに分割してください。インスタンスごとにマテリアルを複製せずに、選択やハイライトを実現する方法を計画してください。

生成したジオメトリの所有権を明確にし、不変のアセットは再利用してください。ジオメトリを破棄するのは、最後の利用者が解放したときだけにしてください。指向性ライト下での法線、チェッカーテクスチャでのシーム、カメラの端でのカリング、更新後のインスタンスごとのピッキングを検証してください。

API リファレンス

正確なシグネチャとリビジョンごとの動作については、公式ドキュメントを参照してください。ドキュメントにアクセスできない場合は、インストール済みの型定義やソースを確認し、解消されていない不確実な点を明示してください。

コメント