@react-three/fiber

react-three-fiber adalah penyaji React untuk threejs.

Bangun adegan Anda secara deklaratif dengan komponen mandiri yang dapat digunakan kembali dan bereaksi terhadap keadaan, mudah interaktif, dan dapat berpartisipasi dalam ekosistem React.

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

Apakah ada batasannya?

Tidak ada. Segala sesuatu yang berfungsi di Threejs akan berfungsi di sini tanpa kecuali.

Apakah lebih lambat dari Threejs biasa?

Tidak. Tidak ada biaya tambahan. Komponen dirender di luar React. Ini mengungguli Threejs dalam skala karena kemampuan penjadwalan React.

Bisakah ia mengikuti pembaruan fitur yang sering dilakukan pada Threejs?

Ya. Itu hanya mengekspresikan Threejs di JSX, secara dinamis berubah menjadi new THREE.Mesh() . Jika versi Threejs baru menambahkan, menghapus, atau mengubah fitur, fitur tersebut akan langsung tersedia untuk Anda tanpa bergantung pada pembaruan pada perpustakaan ini.

Seperti apa bentuknya?

Mari kita membuat komponen yang dapat digunakan kembali yang memiliki statusnya sendiri, bereaksi terhadap input pengguna dan berpartisipasi dalam render-loop. (demo langsung).

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

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

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

Tampilkan contoh React Native

Contoh ini mengandalkan reaksi 18 dan menggunakan expo-cli , tetapi Anda dapat membuat proyek kosong dengan templatnya atau dengan 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

Beberapa konfigurasi mungkin diperlukan untuk memberi tahu Metro bundler tentang aset Anda jika Anda menggunakan abstraksi useLoader atau Drei seperti useGLTF dan 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 >
  )
}

Dokumentasi, tutorial, contoh

Kunjungi docs.pmnd.rs

Langkah pertama

Anda harus menguasai React dan Threejs sebelum terjun ke dalamnya. Jika Anda tidak yakin tentang React, bacalah dokumen resmi React, khususnya bagian tentang hooks. Sedangkan untuk Threejs, pastikan Anda setidaknya melihat sekilas tautan berikut:

Pastikan Anda memiliki pemahaman dasar tentang Threejs. Biarkan situs itu tetap terbuka.
Jika Anda mengetahui apa itu pemandangan, kamera, mesh, geometri, material, lihat demo di atas.
Cari elemen JSX yang Anda lihat (mesh, ambientLight, dll), semua ekspor threejs adalah asli dari tiga serat.
Coba ubah beberapa nilai, gulir ke seluruh API kami untuk melihat apa yang dilakukan berbagai pengaturan dan kait.

Beberapa materi bermanfaat:

Threejs-dokumen dan contoh
Temukan Threejs, terutama bab Tip dan Trik untuk praktik terbaik
Bruno Simons Threejs Jouney, bisa dibilang sumber belajar terbaik, kini menyertakan bab R3F lengkap

Ekosistem

Ada ekosistem yang dinamis dan luas di sekitar tiga serat, penuh dengan perpustakaan, pembantu, dan abstraksi.

@react-three/drei – pembantu yang berguna, ini adalah ekosistem tersendiri
@react-three/gltfjsx – mengubah GLTF menjadi komponen JSX
@react-three/postprocessing – efek pasca-pemrosesan
@react-three/uikit – WebGL merender komponen UI untuk tiga serat
@react-three/test-renderer – untuk pengujian unit di node
@react-three/offscreen – kanvas luar layar/pekerja untuk react-three-fiber
@react-three/flex – flexbox untuk reaksi-tiga-serat
@react-three/xr – Pengontrol dan acara VR/AR
@react-three/csg – geometri padat yang konstruktif
@react-three/rapier – Fisika 3D menggunakan Rapier
@react-three/cannon – Fisika 3D menggunakan Cannon
@react-three/p2 – Fisika 2D menggunakan P2
@react-three/a11y – a11y nyata untuk adegan Anda
@react-three/gpu-pathtracer – penelusuran jalur yang realistis
create-r3f-app next – starter nextjs
lamina – bahan shader berbasis lapisan
zustand – manajemen negara berbasis fluks
jotai – manajemen negara berbasis atom
valtio – manajemen negara berbasis proxy
react-spring – perpustakaan animasi berbasis pegas fisika
framer-motion-3d – framer motion, perpustakaan animasi populer
use-gesture – gerakan mouse/sentuh
leva – membuat kontrol GUI dalam hitungan detik
maath – wastafel dapur untuk pembantu matematika
miniplex – ECS (sistem manajemen entitas)
composer-suite – menyusun shader, partikel, efek, dan mekanisme permainan
triplex – editor adegan untuk reaksi-tiga-serat
koestlich – Pustaka komponen UI untuk react-three-fiber

Tren Penggunaan Keluarga @react-three

Siapa yang menggunakan Three-fiber

Sejumlah kecil perusahaan dan proyek yang mengandalkan tiga serat.

vercel (agen desain)
basement (agen desain)
studio freight (agen desain)
14 islands (agen desain)
ueno (agensi desain) — video
flux.ai (pembuat PCB)
colorful.app (pemodel)
bezi (pemodel)
readyplayer.me (konfigurator avatar)
zillow (real estat)
lumalabs.ai/genie (model AI)
skybox.blockadelabs (peta AI)
3dconfig (perencana lantai)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — video
triplex (editor) — video
theatrejs (editor) — video

Bagaimana cara berkontribusi

Jika Anda menyukai proyek ini, mohon pertimbangkan untuk membantu. Semua kontribusi diterima serta sumbangan ke Opencollective, atau dalam kripto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .