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 "