@react-três/fibra

react-três-fiber é um renderizador React para threejs.

Construa sua cena de forma declarativa com componentes reutilizáveis e independentes que reagem ao estado, são prontamente interativos e podem participar do ecossistema do React.

npm install three @types/three @react-three/fiber

Tem limitações?

Nenhum. Tudo o que funciona no Threejs funcionará aqui, sem exceção.

É mais lento que o Threejs simples?

Não. Não há despesas gerais. Componentes são renderizados fora do React. Ele supera o Threejs em escala devido às habilidades de agendamento do React.

Ele consegue acompanhar as atualizações frequentes de recursos do Threejs?

Sim. Ele apenas expressa Threejs em JSX, se transforma dinamicamente em new THREE.Mesh() . Se uma nova versão do Threejs adicionar, remover ou alterar recursos, ela estará disponível para você instantaneamente, sem depender de atualizações desta biblioteca.

Como é?

Vamos criar um componente reutilizável que tenha seu próprio estado, reaja à entrada do usuário e participe do loop de renderização. (demonstração ao vivo).

 import { createRoot } from 'react-dom/client'
import React , { useRef , useState } from 'react'
import { Canvas , useFrame } from '@react-three/fiber'

function Box ( props ) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef ( )
  // Hold state for hovered and clicked events
  const [ hovered , hover ] = useState ( false )
  const [ clicked , click ] = useState ( false )
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame ( ( state , delta ) => ( ref . current . rotation . x += delta ) )
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    < mesh
      { ... props }
      ref = { ref }
      scale = { clicked ? 1.5 : 1 }
      onClick = { ( event ) => click ( ! clicked ) }
      onPointerOver = { ( event ) => hover ( true ) }
      onPointerOut = { ( event ) => hover ( false ) } >
      < boxGeometry args = { [ 1 , 1 , 1 ] } / >
      < meshStandardMaterial color = { hovered ? 'hotpink' : 'orange' } / >
    < / mesh >
  )
}

createRoot ( document . getElementById ( 'root' ) ) . render (
  < Canvas >
    < ambientLight intensity = { Math . PI / 2 } / >
    < spotLight position = { [ 10 , 10 , 10 ] } angle = { 0.15 } penumbra = { 1 } decay = { 0 } intensity = { Math . PI } / >
    < pointLight position = { [ - 10 , - 10 , - 10 ] } decay = { 0 } intensity = { Math . PI } / >
    < Box position = { [ - 1.2 , 0 , 0 ] } / >
    < Box position = { [ 1.2 , 0 , 0 ] } / >
  < / Canvas > ,
)

Mostrar exemplo de TypeScript

npm install @types/three

 import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React , { useRef , useState } from 'react'
import { Canvas , useFrame , ThreeElements } from '@react-three/fiber'

function Box ( props : ThreeElements [ 'mesh' ] ) {
  const ref = useRef < THREE . Mesh > ( null ! )
  const [ hovered , hover ] = useState ( false )
  const [ clicked , click ] = useState ( false )
  useFrame ( ( state , delta ) => ( ref . current . rotation . x += delta ) )
  return (
    < mesh
      { ... props }
      ref = { ref }
      scale = { clicked ? 1.5 : 1 }
      onClick = { ( event ) => click ( ! clicked ) }
      onPointerOver = { ( event ) => hover ( true ) }
      onPointerOut = { ( event ) => hover ( false ) } >
      < boxGeometry args = { [ 1 , 1 , 1 ] } / >
      < meshStandardMaterial color = { hovered ? 'hotpink' : 'orange' } / >
    < / mesh >
  )
}

createRoot ( document . getElementById ( 'root' ) as HTMLElement ) . render (
  < Canvas >
    < ambientLight intensity = { Math . PI / 2 } / >
    < spotLight position = { [ 10 , 10 , 10 ] } angle = { 0.15 } penumbra = { 1 } decay = { 0 } intensity = { Math . PI } / >
    < pointLight position = { [ - 10 , - 10 , - 10 ] } decay = { 0 } intensity = { Math . PI } / >
    < Box position = { [ - 1.2 , 0 , 0 ] } / >
    < Box position = { [ 1.2 , 0 , 0 ] } / >
  < / Canvas > ,
)

Demonstração ao vivo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

Mostrar exemplo do React Native

Este exemplo depende do react 18 e usa expo-cli , mas você pode criar um projeto simples com seu modelo ou com a CLI react-native .

 # Install expo-cli, this will create our app
npm install expo-cli -g
# Create app and cd into it
expo init my-app
cd my-app
# Install dependencies
npm install three @react-three/fiber@beta react@rc
# Start
expo start

Alguma configuração pode ser necessária para informar ao empacotador Metro sobre seus ativos se você usar abstrações useLoader ou Drei como useGLTF e useTexture :

 // metro.config.js
module . exports = {
  resolver : {
    sourceExts : [ 'js' , 'jsx' , 'json' , 'ts' , 'tsx' , 'cjs' ] ,
    assetExts : [ 'glb' , 'png' , 'jpg' ] ,
  } ,
}

 import React , { useRef , useState } from 'react'
import { Canvas , useFrame } from '@react-three/fiber/native'
function Box ( props ) {
  const mesh = useRef ( null )
  const [ hovered , setHover ] = useState ( false )
  const [ active , setActive ] = useState ( false )
  useFrame ( ( state , delta ) => ( mesh . current . rotation . x += delta ) )
  return (
    < mesh
      { ... props }
      ref = { mesh }
      scale = { active ? 1.5 : 1 }
      onClick = { ( event ) => setActive ( ! active ) }
      onPointerOver = { ( event ) => setHover ( true ) }
      onPointerOut = { ( event ) => setHover ( false ) } >
      < boxGeometry args = { [ 1 , 1 , 1 ] } / >
      < meshStandardMaterial color = { hovered ? 'hotpink' : 'orange' } / >
    < / mesh >
  )
}
export default function App ( ) {
  return (
    < Canvas >
      < ambientLight intensity = { Math . PI / 2 } / >
      < spotLight position = { [ 10 , 10 , 10 ] } angle = { 0.15 } penumbra = { 1 } decay = { 0 } intensity = { Math . PI } / >
      < pointLight position = { [ - 10 , - 10 , - 10 ] } decay = { 0 } intensity = { Math . PI } / >
      < Box position = { [ - 1.2 , 0 , 0 ] } / >
      < Box position = { [ 1.2 , 0 , 0 ] } / >
    < / Canvas >
  )
}

Documentação, tutoriais, exemplos

Visite docs.pmnd.rs

Primeiros passos

Você precisa ser versado em React e Threejs antes de se apressar nisso. Se você não tiver certeza sobre o React, consulte a documentação oficial do React, especialmente a seção sobre ganchos. Quanto ao Threejs, certifique-se de dar uma olhada nos seguintes links:

Certifique-se de ter um conhecimento básico de Threejs. Mantenha esse site aberto.
Quando você sabe o que é uma cena, uma câmera, malha, geometria, material, bifurque a demonstração acima.
Procure os elementos JSX que você vê (mesh, ambientLight, etc), todas as exportações de threejs são nativas de três fibras.
Tente alterar alguns valores, navegue pela nossa API para ver o que as várias configurações e ganchos fazem.

Algum material útil:

Threejs-docs e exemplos
Descubra Threejs, especialmente o capítulo Dicas e Truques para melhores práticas
Bruno Simons Threejs Jouney, sem dúvida o melhor recurso de aprendizagem, agora inclui um capítulo R3F completo

Ecossistema

Existe um ecossistema vibrante e extenso em torno de três fibras, cheio de bibliotecas, auxiliares e abstrações.

@react-three/drei – ajudantes úteis, este é um ecossistema em si
@react-three/gltfjsx – transforma GLTFs em componentes JSX
@react-three/postprocessing – efeitos de pós-processamento
@react-three/uikit – componentes de UI renderizados em WebGL para três fibras
@react-three/test-renderer – para testes unitários no nó
@react-three/offscreen – tela fora da tela/worker para react-três-fibra
@react-three/flex – flexbox para react-três-fibra
@react-three/xr – controladores e eventos VR/AR
@react-three/csg – geometria sólida construtiva
@react-three/rapier – Física 3D usando Rapier
@react-three/cannon – Física 3D usando Cannon
@react-three/p2 – física 2D usando P2
@react-three/a11y – verdadeiro a11y para sua cena
@react-three/gpu-pathtracer – rastreamento de caminho realista
create-r3f-app next – iniciador nextjs
lamina – materiais de shader baseados em camadas
zustand – gerenciamento de estado baseado em fluxo
jotai – gerenciamento de estado baseado em átomos
valtio – gerenciamento de estado baseado em proxy
react-spring – uma biblioteca de animação baseada em física de primavera
framer-motion-3d – framer motion, uma popular biblioteca de animação
use-gesture – gestos de mouse/toque
leva – crie controles GUI em segundos
maath – uma pia de cozinha para ajudantes de matemática
miniplex – ECS (sistema de gerenciamento de entidades)
composer-suite – composição de shaders, partículas, efeitos e mecânica de jogo
triplex – editor de cena para react-três-fibra
koestlich – biblioteca de componentes de UI para react-três-fibra

Tendência de uso da família @react-três

Quem está usando três fibras

Uma pequena seleção de empresas e projetos que contam com três fibras.

vercel (agência de design)
basement (agência de design)
studio freight (agência de design)
14 islands (agência de design)
ueno (agência de design) — vídeo
flux.ai (construtor de PCB)
colorful.app (modelador)
bezi (modelador)
readyplayer.me (configurador de avatar)
zillow (imóveis)
lumalabs.ai/genie (modelos de IA)
skybox.blockadelabs (mapas de ambiente de IA)
3dconfig (plaina de piso)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — vídeo
triplex (editor) — vídeo
theatrejs (editor) — vídeo

Como contribuir

Se você gosta deste projeto, considere ajudar. Todas as contribuições são bem-vindas, bem como doações para Opencollective, ou em criptografia BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .