pmndrs/drei

これは何？

主な機能

• 01カメラ操作、ギズモ、キーボードやスクロール入力に対応したコンポーネントを用意
• 023Dテキスト、画像、エッジ、軌跡、アウトラインの抽象化
• 03useGLTF、useTexture、useFBXなどのローダーフック
• 04環境マップ、空、シャドウ、ライティング向けのステージング用ヘルパー
• 05インスタンシング、ジオメトリの統合、解像度の自動調整などのパフォーマンス向上ユーティリティ
• 06WebとReact Nativeで別々のエントリーポイントを提供

ユースケース

• OrbitControlsと読み込んだglTFモデルを使った、インタラクティブな製品ビューアーの構築
• Reactサイトに3DテキストやHTMLオーバーレイ、スクロール連動アニメーションを追加
• ソフトシャドウ、環境ライティング、反射マテリアルを使ったシーンの作成
• React Three Fiberアプリで、同じメッシュを大量に効率よく描画

クイックスタート

1. 1

   npmからパッケージをインストールします

   npm install @react-three/drei

使う前に知っておきたいこと

• !React Native用のルート（@react-three/drei/native）では、HtmlやLoaderはエクスポートされません。
• !react-three-fiber向けに作られているため、@react-three/fiberもセットアップする必要があります。

トピック

よくある質問

drei とは？

react-three-fiberで3Dシーンを構築するための、すぐに使えるReact用ヘルパーコンポーネントとフックのコレクションです。 dreiは、Three.jsのReactレンダラーであるreact-three-fiber向けのヘルパーライブラリです。よく使われる3D処理向けのコンポーネントやフックがあらかじめ用意されているため、カメラ操作、ローダー、シャドウ、テキスト、シェーダーマテリアルを一から実装する必要がありません。

drei は無料で使えますか？ライセンスは？

drei は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

drei は今もメンテナンスされていますか？

活発にメンテナンス中。drei の最終コミットは 2026年10月19日 です。

drei は何に使えますか？

OrbitControlsと読み込んだglTFモデルを使った、インタラクティブな製品ビューアーの構築 Reactサイトに3DテキストやHTMLオーバーレイ、スクロール連動アニメーションを追加 ソフトシャドウ、環境ライティング、反射マテリアルを使ったシーンの作成 React Three Fiberアプリで、同じメッシュを大量に効率よく描画

drei のインストール方法は？

npmからパッケージをインストールします: npm install @react-three/drei

drei はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pmndrs/drei