drei

@react-three/fiber 用の便利なヘルパーと完全に機能する既製の抽象化のコレクションが増えています。

他の人にとって役立つほど汎用的なコンポーネントを作成する場合は、貢献することについて考えてください。

npm install @react-three/drei

重要

このパッケージはthree/examples/jsmの代わりにスタンドアロンのthree-stdlib使用しています。

基本的な使い方

 import { PerspectiveCamera , PositionalAudio , ... } from '@react-three/drei' 

リアクトネイティブ

 import { PerspectiveCamera , PositionalAudio , ... } from '@react-three/drei/native'

ライブラリのnativeルートは、 HtmlまたはLoaderをエクスポートしません。ライブラリのデフォルトのエクスポートは、 HtmlとLoaderエクスポートするwebです。

ドキュメント

https://pmndrs.github.io/drei

古い文書

[!WARNING] 以下は、ドキュメント Web サイトへのアンカー リンクのアーカイブと、それぞれの新しい場所です。以下のリンクは参照のみを目的としているため、更新しないでください。

カメラ

視点カメラ

ドキュメントはここに移動しました

正投影カメラ

ドキュメントはここに移動しました

キューブカメラ

ドキュメントはここに移動しました

コントロール

カメラコントロール

ドキュメントはここに移動しました

スクロールコントロール

ドキュメントはここに移動しました

プレゼンテーションコントロール

ドキュメントはここに移動しました

キーボードコントロール

ドキュメントはここに移動しました

フェイスコントロール

ドキュメントはここに移動しました

モーションパスコントロール

ドキュメントはここに移動しました

ギズモ

ギズモヘルパー

ドキュメントはここに移動しました

ピボットコントロール

ドキュメントはここに移動しました

ドラッグコントロール

ドキュメントはここに移動しました

変換コントロール

ドキュメントはここに移動しました

グリッド

ドキュメントはここに移動しました

ヘルパー / useHelper

ドキュメントはここに移動しました

形状

平面、ボックス、球、サークル、円錐、シリンダー、チューブ、トーラス、トーラスノット、リング、四面体、多面体、二十面体、八面体、十二面体、押し出し、旋盤、形状

ドキュメントはここに移動しました

丸いボックス

ドキュメントはここに移動しました

スクリーンクワッド

ドキュメントはここに移動しました

ライン

ドキュメントはここに移動しました

二次ベジェ線

ドキュメントはここに移動しました

キュービックベジェライン

ドキュメントはここに移動しました

キャットマルロムライン

ドキュメントはここに移動しました

フェイスメッシュ

ドキュメントはここに移動しました

抽象化

画像

ドキュメントはここに移動しました

文章

ドキュメントはここに移動しました

テキスト3D

ドキュメントはここに移動しました

効果

ドキュメントはここに移動しました

ポジショナルオーディオ

ドキュメントはここに移動しました

看板

ドキュメントはここに移動しました

スクリーンスペース

ドキュメントはここに移動しました

スクリーンサイザー

ドキュメントはここに移動しました

グラデーションテクスチャ

ドキュメントはここに移動しました

エッジ

ドキュメントはここに移動しました

概要

ドキュメントはここに移動しました

トレイル

ドキュメントはここに移動しました

サンプラー

ドキュメントはここに移動しました

計算された属性

ドキュメントはここに移動しました

クローン

ドキュメントはここに移動しました

useアニメーション

ドキュメントはここに移動しました

マーチングキューブ

ドキュメントはここに移動しました

デカール

ドキュメントはここに移動しました

SVG

ドキュメントはここに移動しました

アスキーレンダラー

ドキュメントはここに移動しました

スプラット

ドキュメントはここに移動しました

シェーダ

メッシュリフレクター素材

ドキュメントはここに移動しました

メッシュぐらつき素材

ドキュメントはここに移動しました

メッシュ歪みマテリアル

ドキュメントはここに移動しました

メッシュ屈折材料

ドキュメントはここに移動しました

メッシュ伝送材料

ドキュメントはここに移動しました

メッシュ廃棄材料

ドキュメントはここに移動しました

ポイント素材

ドキュメントはここに移動しました

ソフトシャドウ

ドキュメントはここに移動しました

シェーダマテリアル

ドキュメントはここに移動しました

修飾子

カーブモディファイア

ドキュメントはここに移動しました

その他

useContextBridge

ドキュメントはここに移動しました

例

ドキュメントはここに移動しました

HTML

ドキュメントはここに移動しました

サイクルレイキャスト

ドキュメントはここに移動しました

選択

ドキュメントはここに移動しました

スプライトアニメーター

ドキュメントはここに移動しました

統計

ドキュメントはここに移動しました

統計Gl

ドキュメントはここに移動しました

ワイヤーフレーム

ドキュメントはここに移動しました

深度バッファを使用する

ドキュメントはここに移動しました

FBO / FBOを使用

ドキュメントはここに移動しました

カメラを使用する

ドキュメントはここに移動しました

CubeCamera / キューブカメラを使用する

ドキュメントはここに移動しました

GPUの検出 / GPUの使用

ドキュメントはここに移動しました

アスペクトを使用する

ドキュメントはここに移動しました

カーソルを使用する

ドキュメントはここに移動しました

useIntersect

ドキュメントはここに移動しました

useBoxProjectedEnv

ドキュメントはここに移動しました

トレイル / 利用トレイル

ドキュメントはここに移動しました

サーフェスサンプラーを使用する

ドキュメントはここに移動しました

顔ランドマーク

ドキュメントはここに移動しました

読み込み中

ローダ

ドキュメントはここに移動しました

進捗状況 / 使用状況進捗状況

ドキュメントはここに移動しました

Gltf / useGLTF

ドキュメントはここに移動しました

Fbx / useFBX

ドキュメントはここに移動しました

テクスチャ / 使用テクスチャ

ドキュメントはここに移動しました

KTX2 / KTX2を使用

ドキュメントはここに移動しました

CubeTexture / キューブテクスチャの使用

ドキュメントはここに移動しました

ビデオテクスチャ / ビデオテクスチャを使用する

ドキュメントはここに移動しました

TrailTexture / 使用TrailTexture

ドキュメントはここに移動しました

使用フォント

ドキュメントはここに移動しました

スプライトローダーを使用する

ドキュメントはここに移動しました

パフォーマンス

インスタンス

ドキュメントはここに移動しました

合併しました

ドキュメントはここに移動しました

ポイント

ドキュメントはここに移動しました

セグメント

ドキュメントはここに移動しました

詳細

ドキュメントはここに移動しました

プリロード

ドキュメントはここに移動しました

ベイクシャドウ

ドキュメントはここに移動しました

メッシュ境界

ドキュメントはここに移動しました

アダプティブDpr

ドキュメントはここに移動しました

アダプティブイベント

ドキュメントはここに移動しました

ふーん

ドキュメントはここに移動しました

パフォーマンスモニター

ドキュメントはここに移動しました

ポータル

ハッド

ドキュメントはここに移動しました

ビュー

ドキュメントはここに移動しました

レンダーテクスチャ

ドキュメントはここに移動しました

レンダーキューブテクスチャ

ドキュメントはここに移動しました

魚眼レンズ

ドキュメントはここに移動しました

マスク

ドキュメントはここに移動しました

メッシュポータル素材

ドキュメントはここに移動しました

ステージング

中心

ドキュメントはここに移動しました

サイズ変更

ドキュメントはここに移動しました

BBAアンカー

ドキュメントはここに移動しました

境界

ドキュメントはここに移動しました

カメラシェイク

ドキュメントはここに移動しました

フロート

ドキュメントはここに移動しました

ステージ

ドキュメントはここに移動しました

背景

ドキュメントはここに移動しました

影

ドキュメントはここに移動しました

コースティクス

ドキュメントはここに移動しました

コンタクトシャドウ

ドキュメントはここに移動しました

ランダム化された光

ドキュメントはここに移動しました

累積シャドウ

ドキュメントはここに移動しました

スポットライト

ドキュメントはここに移動しました

スポットライトシャドウ

ドキュメントはここに移動しました

環境

ドキュメントはここに移動しました

ライトフォーマー

ドキュメントはここに移動しました

空

ドキュメントはここに移動しました

スター

ドキュメントはここに移動しました

輝き

ドキュメントはここに移動しました

雲

ドキュメントはここに移動しました

使用環境

ドキュメントはここに移動しました

MatcapTexture / マットキャップテクスチャの使用

ドキュメントはここに移動しました

NormalTexture / useNormalTexture

ドキュメントはここに移動しました

シャドウアルファ

ドキュメントはここに移動しました

開発者

インストール

$ corepack enable
$ yarn install

テスト

地元

前提条件:

• $ npx playwright install

ビジュアル テストをローカルで実行するには:

$ yarn build
$ yarn test

スナップショットを更新するには:

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test 

ドッカー

重要

スナップショットはシステムに依存するため、CI と同じ環境で playwright を実行するには:

$ docker run --init --rm 
    -v $( pwd ) :/app -w /app 
    ghcr.io/pmndrs/playwright:drei 
      sh -c " corepack enable && yarn install && yarn build && yarn test "

スナップショットを更新するには:

$ docker run --init --rm 
    -v $( pwd ) :/app -w /app 
    -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 
    ghcr.io/pmndrs/playwright:drei 
      sh -c " corepack enable && yarn install && yarn build && yarn test "