threejs-assets について
Three.jsプロジェクトで3Dアセットを読み込み、最適化するための開発スキルです。形式選定、デコーダー設定、非同期読み込み、メモリ最適化、キャッシュ、検証を扱います。
主な機能
- 01形式とメタデータの棚卸し
- 02GLTFLoaderのデコーダー設定
- 03読み込み・失敗・再試行状態の管理
- 04テクスチャとジオメトリの最適化指針
- 05キャッシュとシーンインスタンスの複製
- 06読み込み検証チェックリスト
活用シーン
- 01Web配信用モデルの準備
- 02モデルの素早い切り替えへの対応
- 03テクスチャと転送量の削減
- 04アニメーションとメモリ動作の検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ cesartevisual/ threejs-skills --skill threejs-assetsインストール後、Claude Code で/threejs-assetsを入力して読み込まれたか確認します。
詳細
アセットの読み込みと最適化
プロジェクトにインストール済みのバージョンと既存のアーキテクチャを使用してください。これらの指示はユーザーのタスクを補足するものであり、無関係な変更や外部への操作を許可するものではありません。
形式、寸法、単位、アニメーションクリップ、マテリアルの機能、テクスチャサイズ、出所、転送サイズを調査してください。変換が許容される場合は、ウェブ向けの glTF/GLB パイプラインを優先してください。アプリケーションのロジックに必要な元ファイルと意味のある名前を保持してください。
アセットが実際に必要とするデコーダーを使用するように GLTFLoader を設定してください。デコーダー/トランスコーダーのバイナリはインストール済みライブラリに合わせ、ビルドのアセット規約に従って URL を解決してください。また、アクティブなレンダラーで KTX2 がサポートされているかを検出してください。圧縮ファイルに必要なネットワークリクエストが1回だけだとは限りません。
読み込み中、準備完了、失敗、再試行を明示的に表現してください。コンテンツの長さが不明な場合は、不確定な進捗を表示してください。画面遷移や素早い選択の切り替え時には、世代トークンまたはサポートされているキャンセル機能を使って古い非同期処理の完了を無効化し、所有者がいなくなった遅延結果を解放してください。マネージャーの進捗率が、必ずしもダウンロードバイト数の割合を示すとは限りません。
転送バイト数だけでなく、デコード後の GPU テクスチャメモリも考慮してください。サイズ変更、メッシュの簡略化、Meshopt/Draco、KTX2/Basis を個別に検討し、パイプラインを採用する前にデコード時間と視覚品質を比較してください。必要なアニメーション、スキニング、モーフターゲット、メタデータを保持してください。
不変のソースアセットをキャッシュし、シーンのインスタンスは適切にクローンしてください。スキン付きモデルには、スケルトンに対応したクローンが必要です。キャッシュの削除は、コンポーネントのアンマウントとは別に定義してください。ユーザーのアップロードについては、サイズと複雑さを制限し、外部 URI のポリシーや不正なファイルを処理し、利用側での使用が終わったらオブジェクト URL を無効化してください。
デコーダーファイルの欠落、テクスチャの読み込み失敗、モデルの素早い切り替え、ネストされたデプロイパス、代表的なアニメーションクリップ、繰り返し置換後のメモリ使用量を検証してください。
API リファレンス
正確なシグネチャとリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントを参照できない場合は、インストール済みの型定義やソースを調べ、不明点が残る場合はその旨を明記してください。