drei

越來越多有用的幫助器和功能齊全、現成的 @react- Three/Fiber 抽象集合。

如果您製作的組件足夠通用且對其他人有用，請考慮貢獻！

npm install @react-three/drei

重要的

該套件使用獨立的three-stdlib而不是three/examples/jsm 。

基本用法

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

反應本機

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

庫的native路由不匯出Html或Loader 。庫的預設導出是web ，它會導出Html和Loader 。

文件

https://pmndrs.github.io/drei

老醫生

[!警告] 以下是錨點連結的存檔及其到文件網站的各自新位置。不要更新以下鏈接，它們僅供參考。

相機

透視相機

文件已移至此處

正交相機

文件已移至此處

立方體相機

文件已移至此處

控制

相機控制

文件已移至此處

滾動控件

文件已移至此處

示範控件

文件已移至此處

鍵盤控制

文件已移至此處

臉部控制

文件已移至此處

運動路徑控制

文件已移至此處

小發明

小工具助手

文件已移至此處

樞軸控制

文件已移至此處

拖曳控件

文件已移至此處

變換控件

文件已移至此處

網格

文件已移至此處

助手/useHelper

文件已移至此處

形狀

平面、盒子、球體、圓形、圓錐體、圓柱體、管、環面、環面結、環、四面體、多面體、二十面體、八面體、十二面體、擠壓、車床、形狀

文件已移至此處

圓角盒

文件已移至此處

四螢幕螢幕

文件已移至此處

線

文件已移至此處

二次貝塞爾線

文件已移至此處

三次貝塞爾線

文件已移至此處

卡特穆爾羅姆線

文件已移至此處

面網

文件已移至此處

抽象

影像

文件已移至此處

文字

文件已移至此處

文字3D

文件已移至此處

效果

文件已移至此處

定位音訊

文件已移至此處

廣告看板

文件已移至此處

螢幕空間

文件已移至此處

螢幕尺寸調整器

文件已移至此處

漸層紋理

文件已移至此處

邊緣

文件已移至此處

概要

文件已移至此處

蹤跡

文件已移至此處

取樣器

文件已移至此處

計算屬性

文件已移至此處

複製

文件已移至此處

使用動畫

文件已移至此處

行進立方體

文件已移至此處

貼花

文件已移至此處

svg

文件已移至此處

Ascii渲染器

文件已移至此處

斯普拉特

文件已移至此處

著色器

網狀反射器材質

文件已移至此處

網格擺動材質

文件已移至此處

網格扭曲材質

文件已移至此處

網格折射材質

文件已移至此處

網狀傳輸材料

文件已移至此處

網格廢棄材料

文件已移至此處

點材質

文件已移至此處

軟陰影

文件已移至此處

著色器材質

文件已移至此處

修飾符

曲線修改器

文件已移至此處

雜項

使用上下文橋

文件已移至此處

例子

文件已移至此處

網頁

文件已移至此處

循環射線廣播

文件已移至此處

選擇

文件已移至此處

精靈動畫師

文件已移至此處

統計數據

文件已移至此處

統計數據

文件已移至此處

線框

文件已移至此處

使用深度緩衝區

文件已移至此處

FBO / 使用FBO

文件已移至此處

使用相機

文件已移至此處

CubeCamera / useCubeCamera

文件已移至此處

檢測GPU / useDetectGPU

文件已移至此處

使用方面

文件已移至此處

使用遊標

文件已移至此處

使用相交

文件已移至此處

useBoxProjectedEnv

文件已移至此處

追蹤/使用追蹤

文件已移至此處

使用SurfaceSampler

文件已移至此處

臉部地標

文件已移至此處

載入中

裝載機

文件已移至此處

進度/使用進度

文件已移至此處

gltf / 使用GLTF

文件已移至此處

Fbx / 使用FBX

文件已移至此處

紋理/使用紋理

文件已移至此處

Ktx2 / 使用KTX2

文件已移至此處

立方體紋理 / useCubeTexture

文件已移至此處

視訊紋理 / 使用視訊紋理

文件已移至此處

TrailTexture / useTrailTexture

文件已移至此處

使用字體

文件已移至此處

使用SpriteLoader

文件已移至此處

表現

實例

文件已移至此處

合併

文件已移至此處

積分

文件已移至此處

段

文件已移至此處

詳細的

文件已移至此處

預載

文件已移至此處

烘焙陰影

文件已移至此處

網格邊界

文件已移至此處

自適應Dpr

文件已移至此處

自適應事件

文件已移至此處

血流速度

文件已移至此處

效能監控器

文件已移至此處

入口網站

抬頭顯示器

文件已移至此處

看法

文件已移至此處

渲染紋理

文件已移至此處

渲染立方體紋理

文件已移至此處

魚眼

文件已移至此處

面具

文件已移至此處

網格門戶材質

文件已移至此處

分期

中心

文件已移至此處

調整大小

文件已移至此處

BB錨

文件已移至此處

界線

文件已移至此處

相機震動

文件已移至此處

漂浮

文件已移至此處

階段

文件已移至此處

背景

文件已移至此處

陰影

文件已移至此處

焦散

文件已移至此處

聯繫陰影

文件已移至此處

隨機光

文件已移至此處

累積陰影

文件已移至此處

聚光燈

文件已移至此處

聚光燈陰影

文件已移至此處

環境

文件已移至此處

光之形成者

文件已移至此處

天空

文件已移至此處

星星

文件已移至此處

閃閃發光

文件已移至此處

雲

文件已移至此處

使用環境

文件已移至此處

MatcapTexture / 使用MatcapTexture

文件已移至此處

法線紋理 / 使用法線紋理

文件已移至此處

影子阿爾法

文件已移至此處

開發者

安裝

$ 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 "