three-js
✓このスキルは、ユーザーが「3D シーンの作成」、「メッシュの追加」、 "OrbitControls を実装する"、"GLTF モデルをロードする"、"ブルーム後処理を追加する"、 「カスタム シェーダを作成する」、「パーティクル エフェクトを作成する」、「Three.js のパフォーマンスを最適化する」、 「WebGPU を使用する」、「影を追加する」、「モデルをアニメーション化する」、または Three.js、threejs、WebGL、 WebGPU、GLTF、レイキャスター、シェーダー マテリアル、PBR マテリアル、または後処理エフェクト。 重要: このスキルは VANILLA Three.js (命令型 JavaScript) 用です。リアクト 3 の場合 Fiber (@react-three/fiber、R3F、drei) は、「r3f-best-practices」スキルを確認してください。ただし、R3F は Three.js の React レンダラーであるため、three-js スキルは R3F を操作するときに役に立ちます。 シーンのセットアップを含む 3D Web グラフィックスの完全な Three.js リファレンスを提供します。 ジオメトリ、マテリアル、テクスチャ、ライティング、カメラ、ローダー、アニメーション、コントロール、 インタラクション、シェーダー、後処理、パフォーマンスの最適化、TSL/ノードマテリアル、 WebGPU、物理学、VR/XR の統合。
SKILL.md
React Three Fiber users: This reference is for vanilla Three.js. For R3F/Drei patterns, use the r3f-best-practices skill. However, understanding Three.js concepts here helps when working with R3F since R3F is a React renderer for Three.js.
| references/01-fundamentals.md | Scene setup, renderer config, Object3D hierarchy, coordinate systems | | references/02-geometry.md | Creating shapes, BufferGeometry, instancing, points, lines | | references/06-cameras.md | Camera types, frustum, viewport, projection | | references/13-math.md | Vector3, Matrix4, Quaternion, Euler, Color, MathUtils |
| references/03-materials.md | PBR materials, shader materials, all material types | | references/04-textures.md | Texture loading, UV mapping, render targets, environment maps | | references/05-lighting.md | Light types, shadows, IBL, light probes | | references/11-shaders.md | Custom GLSL shaders, uniforms, varyings, shader patterns |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/noklip-io/agent-skills --skill three-js- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
three-js とは？
このスキルは、ユーザーが「3D シーンの作成」、「メッシュの追加」、 "OrbitControls を実装する"、"GLTF モデルをロードする"、"ブルーム後処理を追加する"、 「カスタム シェーダを作成する」、「パーティクル エフェクトを作成する」、「Three.js のパフォーマンスを最適化する」、 「WebGPU を使用する」、「影を追加する」、「モデルをアニメーション化する」、または Three.js、threejs、WebGL、 WebGPU、GLTF、レイキャスター、シェーダー マテリアル、PBR マテリアル、または後処理エフェクト。 重要: このスキルは VANILLA Three.js (命令型 JavaScript) 用です。リアクト 3 の場合 Fiber (@react-three/fiber、R3F、drei) は、「r3f-best-practices」スキルを確認してください。ただし、R3F は Three.js の React レンダラーであるため、three-js スキルは R3F を操作するときに役に立ちます。 シーンのセットアップを含む 3D Web グラフィックスの完全な Three.js リファレンスを提供します。 ジオメトリ、マテリアル、テクスチャ、ライティング、カメラ、ローダー、アニメーション、コントロール、 インタラクション、シェーダー、後処理、パフォーマンスの最適化、TSL/ノードマテリアル、 WebGPU、物理学、VR/XR の統合。 ソース: noklip-io/agent-skills。
three-js のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/noklip-io/agent-skills --skill three-js インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/noklip-io/agent-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01