react three fiber Télécharger - react three fiber Téléchargement du code source

react three fiber

Autre code source

v8.17.10

Télécharger

@react-trois/fibre

réagir-trois-fibre est un moteur de rendu React pour threejs.

Construisez votre scène de manière déclarative avec des composants réutilisables et autonomes qui réagissent à l'état, sont facilement interactifs et peuvent participer à l'écosystème de React.

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

A-t-il des limites ?

Aucun. Tout ce qui fonctionne dans Threejs fonctionnera ici sans exception.

Est-ce plus lent que Threejs simple ?

Non, il n’y a pas de frais généraux. Les composants sont rendus en dehors de React. Il surpasse Threejs en termes d'échelle grâce aux capacités de planification de React.

Peut-il suivre les mises à jour fréquentes des fonctionnalités de Threejs ?

Oui. Il exprime simplement Threejs en JSX, <mesh /> se transforme dynamiquement en new THREE.Mesh() . Si une nouvelle version de Threejs ajoute, supprime ou modifie des fonctionnalités, elle sera disponible instantanément sans dépendre des mises à jour de cette bibliothèque.

A quoi ça ressemble ?

Créons un composant réutilisable qui a son propre état, réagit aux entrées de l'utilisateur et participe à la boucle de rendu. (démo en direct).

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

Afficher un exemple 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 > ,
)

Démo en direct : https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

Afficher l'exemple de React Native

Cet exemple s'appuie sur React 18 et utilise expo-cli , mais vous pouvez créer un projet nu avec leur modèle ou avec 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

Une certaine configuration peut être nécessaire pour informer le bundler Metro de vos actifs si vous utilisez des abstractions useLoader ou Drei comme useGLTF et 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 >
  )
}

Documentation, tutoriels, exemples

Visitez docs.pmnd.rs

Premiers pas

Vous devez maîtriser à la fois React et Threejs avant de vous lancer dans cela. Si vous n'êtes pas sûr de React, consultez la documentation officielle de React, en particulier la section sur les hooks. Quant à Threejs, assurez-vous de consulter au moins les liens suivants :

Assurez-vous d’avoir une compréhension de base de Threejs. Gardez ce site ouvert.
Quand vous savez ce qu'est une scène, une caméra, un maillage, une géométrie, un matériau, lancez la démo ci-dessus.
Recherchez les éléments JSX que vous voyez (mesh, ambientLight, etc.), toutes les exportations threejs sont natives de trois fibres.
Essayez de modifier certaines valeurs, faites défiler notre API pour voir ce que font les différents paramètres et hooks.

Quelques documents utiles :

Documents Threejs et exemples
Découvrez Threejs, notamment le chapitre Trucs et Astuces pour les bonnes pratiques
Bruno Simons Threejs Jouney, sans doute la meilleure ressource d'apprentissage, comprend désormais un chapitre complet sur R3F

Écosystème

Il existe un écosystème dynamique et étendu autour des trois fibres, rempli de bibliothèques, d'aides et d'abstractions.

@react-three/drei – des aides utiles, c'est un écosystème en soi
@react-three/gltfjsx – transforme les GLTF en composants JSX
@react-three/postprocessing – effets de post-traitement
@react-three/uikit – Composants d'interface utilisateur rendus WebGL pour trois fibres
@react-three/test-renderer – pour les tests unitaires dans le nœud
@react-three/offscreen – toile hors écran/travailleur pour réagir-trois-fibres
@react-three/flex – flexbox pour réagir-trois-fibre
@react-three/xr – Contrôleurs et événements VR/AR
@react-three/csg – géométrie solide constructive
@react-three/rapier – Physique 3D utilisant Rapier
@react-three/cannon – Physique 3D avec Cannon
@react-three/p2 – Physique 2D utilisant P2
@react-three/a11y – un vrai a11y pour votre scène
@react-three/gpu-pathtracer – traçage de chemin réaliste
create-r3f-app next – démarreur nextjs
lamina – matériaux de shader à base de couches
zustand – gestion d'état basée sur les flux
jotai – gestion d'état basée sur les atomes
valtio – gestion d'état basée sur un proxy
react-spring – une bibliothèque d'animation basée sur la physique du printemps
framer-motion-3d – framer motion, une bibliothèque d'animation populaire
use-gesture – gestes de souris/tactile
leva – créer des contrôles GUI en quelques secondes
maath – un évier de cuisine pour les aides en mathématiques
miniplex – ECS (système de gestion d'entité)
composer-suite – composition de shaders, de particules, d'effets et de mécanismes de jeu
triplex – éditeur de scène pour React-Three-Fiber
koestlich – Bibliothèque de composants d'interface utilisateur pour React-Three-Fiber

Tendance d'utilisation de la famille @react-trois

Qui utilise Three-fiber

Une petite sélection d'entreprises et de projets s'appuyant sur les trois fibres.

vercel (agence de design)
basement (agence de design)
studio freight (agence de design)
14 islands (agence de design)
ueno (agence de design) — vidéo
flux.ai (constructeur de PCB)
colorful.app (modélisateur)
bezi (modéliste)
readyplayer.me (configurateur d'avatar)
zillow (immobilier)
lumalabs.ai/genie (modèles IA)
skybox.blockadelabs (envmaps IA)
3dconfig (planificateur de sol)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — vidéo
triplex (éditeur) — vidéo
theatrejs (éditeur) — vidéo

Comment contribuer

Si vous aimez ce projet, pensez à nous aider. Toutes les contributions sont les bienvenues ainsi que les dons à Opencollective, ou en crypto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .