@react-tres/fibra

reaccionar-tres-fibra es un renderizador de React para threejs.

Construya su escena de forma declarativa con componentes autónomos y reutilizables que reaccionan al estado, son fácilmente interactivos y pueden participar en el ecosistema de React.

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

¿Tiene limitaciones?

Ninguno. Todo lo que funciona en Threejs funcionará aquí sin excepción.

¿Es más lento que Threejs simple?

No. No hay gastos generales. Los componentes se renderizan fuera de React. Supera a Threejs en escala debido a las capacidades de programación de React.

¿Puede mantenerse al día con las actualizaciones frecuentes de funciones de Threejs?

Sí. Simplemente expresa Threejs en JSX, se convierte dinámicamente en new THREE.Mesh() . Si una nueva versión de Threejs agrega, elimina o cambia funciones, estará disponible instantáneamente sin depender de las actualizaciones de esta biblioteca.

¿Cómo se ve?

Creemos un componente reutilizable que tenga su propio estado, reaccione a la entrada del usuario y participe en el bucle de renderizado. (demostración en 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 ejemplo 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 > ,
)

Demostración en vivo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

Mostrar ejemplo de React Native

Este ejemplo se basa en reaccionar 18 y usa expo-cli , pero puede crear un proyecto simple con su plantilla o con la 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

Es posible que se requiera alguna configuración para informar al paquete Metro sobre sus activos si usa abstracciones useLoader o Drei como useGLTF y 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 >
  )
}

Documentación, tutoriales, ejemplos.

Visita docs.pmnd.rs

Pinitos

Debes estar versado tanto en React como en Threejs antes de apresurarte a hacer esto. Si no está seguro acerca de React, consulte los documentos oficiales de React, especialmente la sección sobre ganchos. En cuanto a Threejs, asegúrese de echar un vistazo al menos a los siguientes enlaces:

Asegúrate de tener un conocimiento básico de Threejs. Mantenga ese sitio abierto.
Cuando sepas qué es una escena, una cámara, una malla, una geometría, un material, bifurca la demostración de arriba.
Busque los elementos JSX que ve (malla, luz ambiental, etc.), todas las exportaciones de threejs son nativas de tres fibras.
Intente cambiar algunos valores, desplácese por nuestra API para ver qué hacen las distintas configuraciones y enlaces.

Algún material útil:

Threejs-docs y ejemplos
Descubra Threejs, especialmente el capítulo de consejos y trucos para conocer las mejores prácticas
Bruno Simons Threejs Jouney, posiblemente el mejor recurso de aprendizaje, ahora incluye un capítulo completo de R3F

Ecosistema

Existe un ecosistema vibrante y extenso alrededor de tres fibras, lleno de bibliotecas, ayudantes y abstracciones.

@react-three/drei – ayudantes útiles, este es un ecosistema en sí mismo
@react-three/gltfjsx – convierte los GLTF en componentes JSX
@react-three/postprocessing – efectos de posprocesamiento
@react-three/uikit : componentes de interfaz de usuario renderizados por WebGL para tres fibras
@react-three/test-renderer – para pruebas unitarias en el nodo
@react-three/offscreen – fuera de pantalla/lienzo de trabajador para reaccionar-tres-fibra
@react-three/flex – flexbox para reaccionar-tres-fibra
@react-three/xr – Controladores y eventos VR/AR
@react-three/csg – geometría sólida constructiva
@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 – a11y real para tu escena
@react-three/gpu-pathtracer – seguimiento de ruta realista
create-r3f-app next – iniciador nextjs
lamina : materiales de sombreado basados en capas
zustand – gestión de estado basada en flujo
jotai – gestión estatal basada en átomos
valtio – gestión de estado basada en proxy
react-spring : una biblioteca de animación basada en la física de primavera
framer-motion-3d – framer motion, una biblioteca de animación popular
use-gesture : gestos táctiles/del ratón
leva : crea controles GUI en segundos
maath – un fregadero de cocina para ayudantes de matemáticas
miniplex – ECS (sistema de gestión de entidades)
composer-suite : composición de sombreadores, partículas, efectos y mecánicas de juego
triplex – editor de escenas para reaccionar-tres-fibras
koestlich : biblioteca de componentes de interfaz de usuario para reaccionar-tres-fibras

Tendencia de uso de la familia @react-tres

¿Quién usa Tres Fibras?

Una pequeña selección de empresas y proyectos que apuestan por las tres fibras.

vercel (agencia de diseño)
basement (agencia de diseño)
studio freight (agencia de diseño)
14 islands (agencia de diseño)
ueno (agencia de diseño) — vídeo
flux.ai (constructor de PCB)
colorful.app (modelador)
bezi (modelador)
readyplayer.me (configurador de avatares)
zillow (bienes raíces)
lumalabs.ai/genie (modelos de IA)
skybox.blockadelabs (mapas de entorno AI)
3dconfig (cepillador de piso)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — vídeo
triplex (editor) — vídeo
theatrejs (editor) — vídeo

Como contribuir

Si te gusta este proyecto, considera ayudar. Todas las contribuciones son bienvenidas, así como las donaciones a Opencollective, o en cripto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .