🛠️ 開発・MCP コミュニティ
drei
React Three Fiberの拡張ライブラリ@react-three/dreiのエキスパートとして、3D表現に必要な様々なコンポーネントや便利な機能を活用し、開発者が創造的な作業に集中できるよう支援するSkill。
📜 元の英語説明(参考)
You are an expert in @react-three/drei, the companion library for React Three Fiber that provides 100+ ready-made components and hooks for common 3D patterns. You help developers add orbit controls, environment maps, text rendering, HTML overlays, loaders, performance utilities, shaders, and abstractions — eliminating boilerplate and letting teams focus on creative work instead of Three.js plumbing.
🇯🇵 日本人クリエイター向け解説
一言でいうと
React Three Fiberの拡張ライブラリ@react-three/dreiのエキスパートとして、3D表現に必要な様々なコンポーネントや便利な機能を活用し、開発者が創造的な作業に集中できるよう支援するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
⚡ おすすめ: コマンド1行でインストール(60秒)
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o drei.zip https://jpskill.com/download/14849.zip && unzip -o drei.zip && rm drei.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14849.zip -OutFile "$d\drei.zip"; Expand-Archive "$d\drei.zip" -DestinationPath $d -Force; ri "$d\drei.zip"完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
drei.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
dreiフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Drei — React Three Fiber のための必須ヘルパー
あなたは @react-three/drei のエキスパートです。@react-three/drei は React Three Fiber のコンパニオンライブラリであり、一般的な 3D パターンのために 100 以上の既製コンポーネントとフックを提供します。開発者が Orbit コントロール、環境マップ、テキストレンダリング、HTML オーバーレイ、ローダー、パフォーマンスユーティリティ、シェーダー、および抽象化を追加するのを支援し、ボイラープレートを排除し、チームが Three.js の配管ではなく創造的な作業に集中できるようにします。
主要な機能
コントロール
import { OrbitControls, MapControls, FlyControls, ScrollControls } from "@react-three/drei";
// オブジェクトの周りを回転 (製品ビューワー)
<OrbitControls enablePan={false} autoRotate autoRotateSpeed={0.5} />
// マップスタイルのコントロール (トップダウン、パン + ズーム)
<MapControls enableRotate={false} />
// シーンを飛び回る (ゲーム、建築ビジュアライゼーション)
<FlyControls movementSpeed={5} rollSpeed={0.5} />
// スクロール連動アニメーション (ランディングページ)
<ScrollControls pages={3} damping={0.25}>
<SceneContent /> {/* スクロール位置を読み取るには useScroll() を内部で使用 */}
</ScrollControls>環境とライティング
import { Environment, Lightformer, Sky, Stars, Stage } from "@react-three/drei";
// HDR 環境マップ (リアルな反射)
<Environment preset="sunset" />
<Environment files="/hdri/warehouse.hdr" />
// カスタムスタジオライティング
<Environment>
<Lightformer position={[0, 5, 0]} scale={10} intensity={2} />
<Lightformer position={[5, 0, 0]} scale={5} color="blue" />
</Environment>
// クイック製品ステージング (自動ライティング + 影)
<Stage environment="city" intensity={0.5} shadows adjustCamera>
<Model />
</Stage>
// プロシージャルな空
<Sky sunPosition={[100, 10, 100]} turbidity={8} />
<Stars radius={100} depth={50} count={5000} />テキストと HTML
import { Text, Text3D, Html, Billboard } from "@react-three/drei";
// 3D 空間内の 2D テキスト (SDF レンダリング、どんな距離でも鮮明)
<Text fontSize={0.5} color="white" anchorX="center" font="/fonts/Inter.woff">
Hello World
</Text>
// 押し出し 3D テキスト (ジオメトリ)
<Text3D font="/fonts/Inter_Bold.json" size={1} height={0.2} bevelEnabled bevelSize={0.02}>
3D TEXT
<meshStandardMaterial color="gold" metalness={0.8} />
</Text3D>
// 3D 空間内の HTML DOM 要素
<Html position={[0, 2, 0]} center distanceFactor={5} occlude>
<div className="bg-white p-4 rounded-lg shadow">
<h3>Product Info</h3>
<button onClick={handleBuy}>Buy Now</button>
</div>
</Html>
// 常にカメラの方向を向く
<Billboard><Text>Always visible</Text></Billboard>ローダーとアセット
import { useGLTF, useTexture, useVideoTexture, useFBX, Preload } from "@react-three/drei";
// GLTF モデル
const { scene, nodes, materials } = useGLTF("/model.glb");
// テクスチャ (自動破棄付き)
const [colorMap, normalMap, roughnessMap] = useTexture([
"/textures/color.jpg",
"/textures/normal.jpg",
"/textures/roughness.jpg",
]);
// ビデオをテクスチャとして (スクリーン、ビルボード用)
const videoTexture = useVideoTexture("/video/demo.mp4");
// Canvas 内のすべてのアセットをプリロード
<Preload all />シェイプとヘルパー
import {
RoundedBox, Sphere, Torus, Line, QuadraticBezierLine,
Float, MeshWobbleMaterial, MeshDistortMaterial, ContactShadows,
Grid, GizmoHelper, GizmoViewport,
} from "@react-three/drei";
// 組み込み済みのジオメトリ
<RoundedBox args={[1, 1, 1]} radius={0.1} smoothness={4}>
<meshStandardMaterial color="blue" />
</RoundedBox>
// アニメーションマテリアル
<Sphere args={[1, 64, 64]}>
<MeshDistortMaterial color="#8B5CF6" speed={2} distort={0.3} />
</Sphere>
// フローティングアニメーション
<Float speed={2} rotationIntensity={0.5} floatIntensity={1}>
<Model />
</Float>
// 地面の影 (影の平面は不要)
<ContactShadows position={[0, -1, 0]} opacity={0.5} blur={2} />
// デバッググリッド
<Grid infiniteGrid fadeDistance={30} cellColor="#6f6f6f" />パフォーマンス
import { AdaptiveDpr, AdaptiveEvents, PerformanceMonitor, Instances, Detailed } from "@react-three/drei";
// 品質を自動調整
<AdaptiveDpr pixelated />
<PerformanceMonitor onDecline={() => setDpr(0.5)} onIncline={() => setDpr(1)} />
// LOD (詳細レベル)
<Detailed distances={[0, 20, 50]}>
<HighPolyModel /> {/* 近い */}
<MedPolyModel /> {/* 中間 */}
<LowPolyModel /> {/* 遠い */}
</Detailed>
// 1000 個のオブジェクトに対する GPU インスタンス化
<Instances limit={1000}>
<boxGeometry />
<meshStandardMaterial />
{positions.map((pos, i) => <Instance key={i} position={pos} />)}
</Instances>インストール
npm install @react-three/drei
# ピア依存関係: @react-three/fiber threeベストプラクティス
- クイックセットアップのための Stage —
<Stage>を使用して、製品ショットのための即座にプロフェッショナルなライティングと影を取得します。 - 反射のための Environment — 常に
<Environment>を追加します。PBR マテリアルはそれがないと平坦に見えます。 - 3D の UI のための Html — ツールチップ、ラベル、ボタンには
<Html>を使用します。occludeはそれらを 3D オブジェクトの背後に隠します。 - モーションのための Float — あらゆるオブジェクトを
<Float>でラップして、穏やかなフローティングアニメーションを実現します。ヒーローセクションに最適です。 - ContactShadows — 本物の影よりも安価です。オブジェクトの下に配置して、接地効果を得ます。
- パフォーマンスのための Instances — 森林、パーティクルフィールド、都市ブロックには
<Instances>を使用します。個々のメッシュよりも 100 倍高速です。 - アセットのプリロード — Canvas 内に
<Preload all />を追加します。アセットはシーンがレンダリングされる前にロードされます。 - ランディングページのための ScrollControls — 外部ライブラリなしでスクロール連動の 3D アニメーションを実現します。
useScroll()は正規化された進行状況を提供します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Drei — Essential Helpers for React Three Fiber
You are an expert in @react-three/drei, the companion library for React Three Fiber that provides 100+ ready-made components and hooks for common 3D patterns. You help developers add orbit controls, environment maps, text rendering, HTML overlays, loaders, performance utilities, shaders, and abstractions — eliminating boilerplate and letting teams focus on creative work instead of Three.js plumbing.
Core Capabilities
Controls
import { OrbitControls, MapControls, FlyControls, ScrollControls } from "@react-three/drei";
// Orbit around an object (product viewer)
<OrbitControls enablePan={false} autoRotate autoRotateSpeed={0.5} />
// Map-style controls (top-down, pan + zoom)
<MapControls enableRotate={false} />
// Fly through scene (game, architectural viz)
<FlyControls movementSpeed={5} rollSpeed={0.5} />
// Scroll-linked animation (landing pages)
<ScrollControls pages={3} damping={0.25}>
<SceneContent /> {/* useScroll() inside to read scroll position */}
</ScrollControls>Environment and Lighting
import { Environment, Lightformer, Sky, Stars, Stage } from "@react-three/drei";
// HDR environment map (realistic reflections)
<Environment preset="sunset" />
<Environment files="/hdri/warehouse.hdr" />
// Custom studio lighting
<Environment>
<Lightformer position={[0, 5, 0]} scale={10} intensity={2} />
<Lightformer position={[5, 0, 0]} scale={5} color="blue" />
</Environment>
// Quick product staging (auto lighting + shadows)
<Stage environment="city" intensity={0.5} shadows adjustCamera>
<Model />
</Stage>
// Procedural sky
<Sky sunPosition={[100, 10, 100]} turbidity={8} />
<Stars radius={100} depth={50} count={5000} />Text and HTML
import { Text, Text3D, Html, Billboard } from "@react-three/drei";
// 2D text in 3D space (SDF rendering, crisp at any distance)
<Text fontSize={0.5} color="white" anchorX="center" font="/fonts/Inter.woff">
Hello World
</Text>
// Extruded 3D text (geometry)
<Text3D font="/fonts/Inter_Bold.json" size={1} height={0.2} bevelEnabled bevelSize={0.02}>
3D TEXT
<meshStandardMaterial color="gold" metalness={0.8} />
</Text3D>
// HTML DOM elements in 3D space
<Html position={[0, 2, 0]} center distanceFactor={5} occlude>
<div className="bg-white p-4 rounded-lg shadow">
<h3>Product Info</h3>
<button onClick={handleBuy}>Buy Now</button>
</div>
</Html>
// Always face camera
<Billboard><Text>Always visible</Text></Billboard>Loaders and Assets
import { useGLTF, useTexture, useVideoTexture, useFBX, Preload } from "@react-three/drei";
// GLTF model
const { scene, nodes, materials } = useGLTF("/model.glb");
// Textures (with auto-disposal)
const [colorMap, normalMap, roughnessMap] = useTexture([
"/textures/color.jpg",
"/textures/normal.jpg",
"/textures/roughness.jpg",
]);
// Video as texture (for screens, billboards)
const videoTexture = useVideoTexture("/video/demo.mp4");
// Preload all assets inside Canvas
<Preload all />Shapes and Helpers
import {
RoundedBox, Sphere, Torus, Line, QuadraticBezierLine,
Float, MeshWobbleMaterial, MeshDistortMaterial, ContactShadows,
Grid, GizmoHelper, GizmoViewport,
} from "@react-three/drei";
// Pre-built geometries
<RoundedBox args={[1, 1, 1]} radius={0.1} smoothness={4}>
<meshStandardMaterial color="blue" />
</RoundedBox>
// Animated materials
<Sphere args={[1, 64, 64]}>
<MeshDistortMaterial color="#8B5CF6" speed={2} distort={0.3} />
</Sphere>
// Floating animation
<Float speed={2} rotationIntensity={0.5} floatIntensity={1}>
<Model />
</Float>
// Ground shadows (no shadow plane needed)
<ContactShadows position={[0, -1, 0]} opacity={0.5} blur={2} />
// Debug grid
<Grid infiniteGrid fadeDistance={30} cellColor="#6f6f6f" />Performance
import { AdaptiveDpr, AdaptiveEvents, PerformanceMonitor, Instances, Detailed } from "@react-three/drei";
// Auto-adjust quality
<AdaptiveDpr pixelated />
<PerformanceMonitor onDecline={() => setDpr(0.5)} onIncline={() => setDpr(1)} />
// LOD (Level of Detail)
<Detailed distances={[0, 20, 50]}>
<HighPolyModel /> {/* Close */}
<MedPolyModel /> {/* Medium */}
<LowPolyModel /> {/* Far */}
</Detailed>
// GPU instancing for 1000s of objects
<Instances limit={1000}>
<boxGeometry />
<meshStandardMaterial />
{positions.map((pos, i) => <Instance key={i} position={pos} />)}
</Instances>Installation
npm install @react-three/drei
# Peer dependency: @react-three/fiber threeBest Practices
- Stage for quick setup — Use
<Stage>to get instant professional lighting and shadows for product shots - Environment for reflections — Always add
<Environment>; PBR materials look flat without it - Html for UI in 3D — Use
<Html>for tooltips, labels, buttons;occludehides them behind 3D objects - Float for motion — Wrap any object in
<Float>for gentle floating animation; great for hero sections - ContactShadows — Cheaper than real shadows; place below objects for grounding effect
- Instances for performance — Use
<Instances>for forests, particle fields, city blocks; 100x faster than individual meshes - Preload assets — Add
<Preload all />inside Canvas; assets load before scene renders - ScrollControls for landing pages — Scroll-linked 3D animations without external libraries;
useScroll()gives normalized progress