@react-drei/fiber

React-Three-Fiber ist ein React-Renderer für ThreeJS.

Erstellen Sie Ihre Szene deklarativ mit wiederverwendbaren, eigenständigen Komponenten, die auf den Zustand reagieren, leicht interaktiv sind und am React-Ökosystem teilnehmen können.

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

Gibt es Einschränkungen?

Keiner. Alles, was in Threejs funktioniert, wird hier ausnahmslos funktionieren.

Ist es langsamer als normales Threejs?

Nein. Es gibt keinen Overhead. Komponenten werden außerhalb von React gerendert. Aufgrund der Planungsfähigkeiten von React übertrifft es Threejs im Umfang.

Kann es mit den häufigen Feature-Updates von Threejs mithalten?

Ja. Es drückt lediglich Threejs in JSX aus, wird dynamisch in new THREE.Mesh() umgewandelt. Wenn eine neue Threejs-Version Funktionen hinzufügt, entfernt oder ändert, steht sie Ihnen sofort zur Verfügung, ohne auf Aktualisierungen dieser Bibliothek angewiesen zu sein.

Wie sieht es aus?

Lassen Sie uns eine wiederverwendbare Komponente erstellen, die ihren eigenen Status hat, auf Benutzereingaben reagiert und an der Renderschleife teilnimmt. (Live-Demo).

 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 > ,
)

TypeScript-Beispiel anzeigen

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 > ,
)

Live-Demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

Beispiel für React Native anzeigen

Dieses Beispiel basiert auf React 18 und verwendet expo-cli , aber Sie können ein reines Projekt mit ihrer Vorlage oder mit der react-native -CLI erstellen.

 # 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

Möglicherweise sind einige Konfigurationen erforderlich, um dem Metro-Bundler Ihre Assets mitzuteilen, wenn Sie useLoader oder Drei-Abstraktionen wie useGLTF und useTexture verwenden:

 // 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 >
  )
}

Dokumentation, Tutorials, Beispiele

Besuchen Sie docs.pmnd.rs

Erste Schritte

Sie müssen sich sowohl mit React als auch mit Threejs auskennen, bevor Sie sich darauf einlassen. Wenn Sie sich über React nicht sicher sind, konsultieren Sie die offiziellen React-Dokumente, insbesondere den Abschnitt über Hooks. Was Threejs betrifft, sollten Sie sich zumindest die folgenden Links ansehen:

Stellen Sie sicher, dass Sie über grundlegende Kenntnisse von Threejs verfügen. Halten Sie diese Seite geöffnet.
Wenn Sie wissen, was eine Szene, eine Kamera, ein Netz, eine Geometrie und ein Material ist, sehen Sie sich die obige Demo an.
Suchen Sie nach den JSX-Elementen, die Sie sehen (Mesh, AmbientLight usw.). Alle ThreeJS-Exporte sind nativ für Three-Fiber.
Versuchen Sie, einige Werte zu ändern, scrollen Sie durch unsere API, um zu sehen, was die verschiedenen Einstellungen und Hooks bewirken.

Einige hilfreiche Materialien:

Threejs-Dokumente und Beispiele
Entdecken Sie Threejs, insbesondere das Kapitel „Tipps und Tricks“ mit Best Practices
Bruno Simons Threejs Jouney, die wohl beste Lernressource, enthält jetzt ein vollständiges R3F-Kapitel

Ökosystem

Rund um Three-Fiber gibt es ein lebendiges und umfangreiches Ökosystem voller Bibliotheken, Helfer und Abstraktionen.

@react-three/drei – nützliche Helfer, das ist ein Ökosystem für sich
@react-three/gltfjsx – verwandelt GLTFs in JSX-Komponenten
@react-three/postprocessing – Nachbearbeitungseffekte
@react-three/uikit – WebGL-gerenderte UI-Komponenten für Three-Fiber
@react-three/test-renderer – für Unit-Tests im Knoten
@react-three/offscreen – Offscreen/Worker-Canvas für React-Three-Fiber
@react-three/flex – Flexbox für React-Three-Fiber
@react-three/xr – VR/AR-Controller und Events
@react-three/csg – konstruktive Volumengeometrie
@react-three/rapier – 3D-Physik mit Rapier
@react-three/cannon – 3D-Physik mit Cannon
@react-three/p2 – 2D-Physik mit P2
@react-three/a11y – echtes A11y für deine Szene
@react-three/gpu-pathtracer – realistische Pfadverfolgung
create-r3f-app next – nextjs-Starter
lamina – schichtbasierte Shader-Materialien
zustand – flussbasiertes Zustandsmanagement
jotai – Atombasiertes Zustandsmanagement
valtio – Proxy-basiertes Zustandsmanagement
react-spring – eine auf Federphysik basierende Animationsbibliothek
framer-motion-3d – Framer Motion, eine beliebte Animationsbibliothek
use-gesture – Maus-/Berührungsgesten
leva – GUI-Steuerelemente in Sekundenschnelle erstellen
maath – eine Küchenspüle für Mathe-Helfer
miniplex – ECS (Entity Management System)
composer-suite – Komponieren von Shader, Partikeln, Effekten und Spielmechaniken
triplex – Szeneneditor für React-Three-Fiber
koestlich – UI-Komponentenbibliothek für React-Three-Fiber

Nutzungstrend der @react-drei-Familie

Wer verwendet Three-Fiber?

Eine kleine Auswahl an Unternehmen und Projekten, die auf Dreifaser setzen.

vercel (Designagentur)
basement (Designagentur)
studio freight (Designagentur)
14 islands (Designagentur)
ueno (Designagentur) – Video
flux.ai (PCB-Builder)
colorful.app (Modellierer)
bezi (Modellbauer)
readyplayer.me (Avatar-Konfigurator)
zillow (Immobilien)
lumalabs.ai/genie (KI-Modelle)
skybox.blockadelabs (KI-Umgebungskarten)
3dconfig (Bodenplaner)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) – Video
triplex (Herausgeber) – Video
theatrejs (Herausgeber) – Video

So können Sie einen Beitrag leisten

Wenn Ihnen dieses Projekt gefällt, denken Sie bitte darüber nach, mitzuhelfen. Alle Beiträge sind willkommen, ebenso wie Spenden an Opencollective oder in Krypto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .