threejs-skills について
threejs-skillsは、Three.jsで3Dシーンやインタラクティブな体験を作るためのスキルです。開発者向けに、シーン設定、描画、操作、アニメーション、レスポンシブ対応を案内します。
主な機能
- 01Three.jsのシーン設定ガイド
- 02ジオメトリ、マテリアル、照明
- 03マウス操作への対応
- 04アニメーションと継続的な描画
- 05ウィンドウサイズ変更への対応
活用シーン
- 01操作可能な3Dオブジェクトの作成
- 02探索できる3Dシーンの構築
- 03アニメーション効果やパーティクルの追加
- 043D空間でのデータ可視化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/threejs-skillsを入力して読み込まれたか確認します。
同梱ファイルreferences/detailed-guide.md
詳細
Three.js スキル
Three.js のベストプラクティスを使用して、高品質な 3D シーンとインタラクティブな体験を体系的に作成します。
詳細ガイド
このスキルを実行する前に、詳細ガイドをお読みください。完全な手順と参考資料が記載されています。そこに記載されている安全性、前提条件、検証要件は必須のものとして扱ってください。集中的な作業の場合は関連するセクションを読み込み、エンドツーエンドの作業の場合はガイド全体をお読みください。
使用する場面
- 3D ビジュアライゼーションやグラフィックスを要求する場合(「3D モデルを作成する」「3D で表示する」)
- インタラクティブな 3D 体験を求める場合(「回転するキューブ」「探索可能なシーン」)
- WebGL またはキャンバスベースのレンダリングが必要な場合
- アニメーション、パーティクル、視覚効果を求める場合
- Three.js、WebGL、3D レンダリングに言及する場合
- 3D 空間でデータを可視化したい場合
ワークフローの例
ユーザー:「マウスの動きに反応するインタラクティブな 3D 球体を作成して」
- セットアップ: Three.js をインポートし、シーン/カメラ/レンダラーを作成
- ジオメトリ: 滑らかな球体のために
SphereGeometry(1, 32, 32)を作成 - マテリアル: リアルな見た目のために
MeshStandardMaterialを使用 - ライティング: アンビエント + ディレクショナルライトを追加
- インタラクション: マウス位置を追跡し、カメラを更新
- アニメーション: 球体を回転させ、継続的にレンダリング
- レスポンシブ: ウィンドウリサイズハンドラーを追加
- 結果: 滑らかでインタラクティブな 3D 球体 ✓
制限事項
- このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、成功基準が欠けている場合は、停止して確認を求めてください。
コメント
Markdown 対応