drei

Uma coleção crescente de auxiliares úteis e abstrações prontas e totalmente funcionais para @react-two/fiber.

Se você faz um componente genérico o suficiente para ser útil a outras pessoas, pense em CONTRIBUIR!

npm install @react-three/drei

Importante

este pacote está usando o three-stdlib independente em vez de three/examples/jsm .

Uso básico

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

React nativo

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

A rota native da biblioteca não exporta Html ou Loader . A exportação padrão da biblioteca é web , que exporta Html e Loader .

Documentação

https://pmndrs.github.io/drei

Documento antigo

[!WARNING] Abaixo está um arquivo dos links das âncoras com seus novos respectivos locais para o site de documentação. Não atualize os links abaixo, eles são apenas para referência.

Câmeras

PerspectivaCâmera

A documentação foi movida para cá

Câmera Ortográfica

A documentação foi movida para cá

Câmera Cubo

A documentação foi movida para cá

Controles

Controles de câmera

A documentação foi movida para cá

Controles de rolagem

A documentação foi movida para cá

Controles de apresentação

A documentação foi movida para cá

Controles de teclado

A documentação foi movida para cá

Controles faciais

A documentação foi movida para cá

Controles MotionPath

A documentação foi movida para cá

Dispositivos

Ajudante do Gizmo

A documentação foi movida para cá

Controles dinâmicos

A documentação foi movida para cá

ArrastarControles

A documentação foi movida para cá

Controles de transformação

A documentação foi movida para cá

Grade

A documentação foi movida para cá

Ajudante / useHelper

A documentação foi movida para cá

Formas

Plano, Caixa, Esfera, Círculo, Cone, Cilindro, Tubo, Toro, TorusKnot, Anel, Tetraedro, Poliedro, Icosaedro, Octaedro, Dodecaedro, Extrusão, Torno, Forma

A documentação foi movida para cá

Caixa Arredondada

A documentação foi movida para cá

Tela Quad

A documentação foi movida para cá

Linha

A documentação foi movida para cá

Linha QuadráticaBezier

A documentação foi movida para cá

CubicBezierLine

A documentação foi movida para cá

CatmullRomLine

A documentação foi movida para cá

Malha facial

A documentação foi movida para cá

Abstrações

Imagem

A documentação foi movida para cá

Texto

A documentação foi movida para cá

Texto3D

A documentação foi movida para cá

Efeitos

A documentação foi movida para cá

Áudio posicional

A documentação foi movida para cá

Painel publicitário

A documentação foi movida para cá

Espaço de tela

A documentação foi movida para cá

Tamanho da tela

A documentação foi movida para cá

Textura Gradiente

A documentação foi movida para cá

Bordas

A documentação foi movida para cá

Contornos

A documentação foi movida para cá

Trilha

A documentação foi movida para cá

Amostrador

A documentação foi movida para cá

Atributo Computado

A documentação foi movida para cá

Clone

A documentação foi movida para cá

usarAnimações

A documentação foi movida para cá

MarchingCubes

A documentação foi movida para cá

Decalque

A documentação foi movida para cá

SVG

A documentação foi movida para cá

AsciiRenderer

A documentação foi movida para cá

Respingo

A documentação foi movida para cá

Sombreadores

MalhaRefletorMaterial

A documentação foi movida para cá

MalhaWobbleMaterial

A documentação foi movida para cá

MalhaDistortMaterial

A documentação foi movida para cá

MalhaRefraçãoMaterial

A documentação foi movida para cá

MalhaTransmissãoMaterial

A documentação foi movida para cá

MalhaDiscardMaterial

A documentação foi movida para cá

PontoMaterial

A documentação foi movida para cá

Sombras Suaves

A documentação foi movida para cá

shaderMaterial

A documentação foi movida para cá

Modificadores

Modificador de Curva

A documentação foi movida para cá

Diversos

useContextBridge

A documentação foi movida para cá

Exemplo

A documentação foi movida para cá

HTML

A documentação foi movida para cá

CicloRaycast

A documentação foi movida para cá

Selecione

A documentação foi movida para cá

Animador de Sprites

A documentação foi movida para cá

Estatísticas

A documentação foi movida para cá

EstatísticasGl

A documentação foi movida para cá

Estrutura de arame

A documentação foi movida para cá

usarDepthBuffer

A documentação foi movida para cá

Fbo / useFBO

A documentação foi movida para cá

usarCâmera

A documentação foi movida para cá

CubeCamera / useCubeCamera

A documentação foi movida para cá

Detectar GPU / usar Detectar GPU

A documentação foi movida para cá

useAspect

A documentação foi movida para cá

usarCursor

A documentação foi movida para cá

usarIntersect

A documentação foi movida para cá

useBoxProjectedEnv

A documentação foi movida para cá

Trilha / uso Trilha

A documentação foi movida para cá

usarSurfaceSampler

A documentação foi movida para cá

FaceLandmarker

A documentação foi movida para cá

Carregando

Carregador

A documentação foi movida para cá

Progresso / usoProgresso

A documentação foi movida para cá

Gltf / useGLTF

A documentação foi movida para cá

Fbx / usarFBX

A documentação foi movida para cá

Textura / usoTextura

A documentação foi movida para cá

Ktx2 / usarKTX2

A documentação foi movida para cá

CubeTexture / useCubeTexture

A documentação foi movida para cá

VideoTexture / useVideoTexture

A documentação foi movida para cá

TrailTexture / useTrailTexture

A documentação foi movida para cá

useFont

A documentação foi movida para cá

useSpriteLoader

A documentação foi movida para cá

Desempenho

Instâncias

A documentação foi movida para cá

Mesclado

A documentação foi movida para cá

Pontos

A documentação foi movida para cá

Segmentos

A documentação foi movida para cá

Detalhado

A documentação foi movida para cá

Pré-carregar

A documentação foi movida para cá

BakeShadows

A documentação foi movida para cá

limites de malha

A documentação foi movida para cá

AdaptativoDpr

A documentação foi movida para cá

Eventos Adaptativos

A documentação foi movida para cá

Bvh

A documentação foi movida para cá

Monitor de desempenho

A documentação foi movida para cá

Portais

Hud

A documentação foi movida para cá

Visualizar

A documentação foi movida para cá

RenderTexture

A documentação foi movida para cá

RenderCubeTextura

A documentação foi movida para cá

Olho de peixe

A documentação foi movida para cá

Máscara

A documentação foi movida para cá

MalhaPortalMaterial

A documentação foi movida para cá

Encenação

Centro

A documentação foi movida para cá

Redimensionar

A documentação foi movida para cá

BBAnchor

A documentação foi movida para cá

Limites

A documentação foi movida para cá

Câmera Shake

A documentação foi movida para cá

Flutuador

A documentação foi movida para cá

Estágio

A documentação foi movida para cá

Pano de fundo

A documentação foi movida para cá

Sombra

A documentação foi movida para cá

Cáusticos

A documentação foi movida para cá

ContatoSombras

A documentação foi movida para cá

RandomizadoLight

A documentação foi movida para cá

Sombras acumulativas

A documentação foi movida para cá

Foco

A documentação foi movida para cá

SpotLightShadow

A documentação foi movida para cá

Ambiente

A documentação foi movida para cá

Formador de luz

A documentação foi movida para cá

Céu

A documentação foi movida para cá

Estrelas

A documentação foi movida para cá

Brilhos

A documentação foi movida para cá

Nuvem

A documentação foi movida para cá

useAmbiente

A documentação foi movida para cá

MatcapTexture /useMatcapTexture

A documentação foi movida para cá

NormalTexture / useNormalTexture

A documentação foi movida para cá

SombraAlfa

A documentação foi movida para cá

Desenvolvedor

INSTALAR

$ corepack enable
$ yarn install

Teste

Local

Pré-requisitos:

• $ npx playwright install

Para executar testes visuais localmente:

$ yarn build
$ yarn test

Para atualizar um instantâneo:

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test 

Docker

Importante

Os instantâneos dependem do sistema, portanto, para executar o dramaturgo no mesmo ambiente que o CI:

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

Para atualizar um instantâneo:

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