@react-three/fiber

react-three-fiber เป็นตัวเรนเดอร์ React สำหรับ threejs

สร้างฉากของคุณอย่างชัดเจนด้วยส่วนประกอบที่นำมาใช้ซ้ำได้และมีอยู่ในตัวเองซึ่งตอบสนองต่อสถานะ มีการโต้ตอบที่พร้อมและสามารถมีส่วนร่วมในระบบนิเวศของ React

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

มันมีข้อจำกัดหรือไม่?

ไม่มี. ทุกสิ่งที่ทำงานใน Threejs จะทำงานที่นี่โดยไม่มีข้อยกเว้น

มันช้ากว่า Threejs ธรรมดาหรือเปล่า?

ไม่ ไม่มีค่าใช้จ่ายใดๆ ส่วนประกอบต่างๆ แสดงผลภายนอก React มันมีประสิทธิภาพเหนือกว่า Threejs ในระดับเนื่องจากความสามารถในการกำหนดเวลาของ React

สามารถติดตามการอัปเดตฟีเจอร์ของ Threejs บ่อยครั้งได้หรือไม่?

ใช่. มันเพียงแสดง Threejs ใน JSX เปลี่ยนเป็น new THREE.Mesh() แบบไดนามิก หาก Threejs เวอร์ชันใหม่เพิ่ม ลบ หรือเปลี่ยนแปลงฟีเจอร์ คุณจะสามารถใช้งานได้ทันทีโดยไม่ต้องขึ้นอยู่กับการอัปเดตไลบรารีนี้

มันมีลักษณะอย่างไร?

มาสร้างส่วนประกอบที่นำมาใช้ซ้ำได้ซึ่งมีสถานะของตัวเอง ตอบสนองต่ออินพุตที่ผู้ใช้ป้อน และมีส่วนร่วมในการเรนเดอร์ลูป (การสาธิตสด)

 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

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

การสาธิตสด: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

แสดงตัวอย่าง React Native

ตัวอย่างนี้อาศัยการตอบสนอง 18 และใช้ expo-cli แต่คุณสามารถสร้างโปรเจ็กต์เปล่าด้วยเทมเพลตหรือด้วย 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

อาจจำเป็นต้องมีการกำหนดค่าบางอย่างเพื่อแจ้ง Metro Bundler เกี่ยวกับทรัพย์สินของคุณ หากคุณใช้ useLoader หรือ Drei abstractions เช่น useGLTF และ 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 >
  )
}

เอกสารประกอบ บทช่วยสอน ตัวอย่าง

เยี่ยมชม docs.pmnd.rs

ขั้นตอนแรก

คุณต้องมีความเชี่ยวชาญทั้ง React และ Threejs ก่อนที่จะรีบดำเนินการนี้ หากคุณไม่แน่ใจเกี่ยวกับ React โปรดดูเอกสาร React อย่างเป็นทางการ โดยเฉพาะหัวข้อเกี่ยวกับ hooks สำหรับ Threejs ตรวจสอบให้แน่ใจว่าคุณได้ดูลิงก์ต่อไปนี้เป็นอย่างน้อย:

ตรวจสอบให้แน่ใจว่าคุณมีความเข้าใจพื้นฐานของ Threejs เปิดไซต์นั้นไว้
เมื่อคุณรู้ว่าฉากคืออะไร กล้อง ตาข่าย เรขาคณิต วัสดุ แยกการสาธิตด้านบน
ค้นหาองค์ประกอบ JSX ที่คุณเห็น (mesh, AmbientLight ฯลฯ) การส่งออก threejs ทั้งหมด นั้นมีพื้นฐานมาจากสามไฟเบอร์
ลองเปลี่ยนค่าบางค่า เลื่อนดู API ของเราเพื่อดูว่าการตั้งค่าและ hooks ต่างๆ มีอะไรบ้าง

เนื้อหาที่เป็นประโยชน์บางส่วน:

Threejs-docs และตัวอย่าง
ค้นพบ Threejs โดยเฉพาะบทเคล็ดลับและคำแนะนำสำหรับแนวทางปฏิบัติที่ดีที่สุด
Bruno Simons Threejs Jouney ซึ่งเป็นแหล่งการเรียนรู้ที่ดีที่สุด ขณะนี้ได้รวมบท R3F ฉบับสมบูรณ์แล้ว

ระบบนิเวศ

มีระบบนิเวศที่มีชีวิตชีวาและกว้างขวางรอบๆ เส้นใยสามชนิด เต็มไปด้วยห้องสมุด ผู้ช่วยเหลือ และสิ่งที่เป็นนามธรรม

@react-three/drei – ผู้ช่วยที่มีประโยชน์ นี่คือระบบนิเวศในตัวเอง
@react-three/gltfjsx – เปลี่ยน GLTFs ให้เป็นส่วนประกอบ JSX
@react-three/postprocessing – เอฟเฟกต์หลังการประมวลผล
@react-three/uikit – WebGL แสดงผลส่วนประกอบ UI สำหรับสามไฟเบอร์
@react-three/test-renderer – สำหรับการทดสอบหน่วยใน node.js
@react-three/offscreen – ผ้าใบนอกจอ/ผู้ปฏิบัติงานสำหรับ react-three-fiber
@react-three/flex – flexbox สำหรับรีแอคทรีไฟเบอร์
@react-three/xr – คอนโทรลเลอร์และเหตุการณ์ VR/AR
@react-three/csg – เรขาคณิตเชิงสร้างสรรค์
@react-three/rapier – ฟิสิกส์ 3 มิติโดยใช้ Rapier
@react-three/cannon – ฟิสิกส์ 3 มิติโดยใช้ Cannon
@react-three/p2 – ฟิสิกส์ 2 มิติโดยใช้ P2
@react-three/a11y – a11y จริง ๆ สำหรับฉากของคุณ
@react-three/gpu-pathtracer – การติดตามเส้นทางที่สมจริง
create-r3f-app next - ตัวเริ่มต้น nextjs
lamina – วัสดุเชเดอร์แบบหลายชั้น
zustand – การจัดการสถานะตามฟลักซ์
jotai – การจัดการสถานะตามอะตอม
valtio – การจัดการสถานะตามพร็อกซี
react-spring – ไลบรารีแอนิเมชั่นที่ใช้ฟิสิกส์สปริง
framer-motion-3d – framer Motion ไลบรารีแอนิเมชั่นยอดนิยม
use-gesture – ท่าทางเมาส์/สัมผัส
leva – สร้างการควบคุม GUI ในไม่กี่วินาที
maath – อ่างล้างจานสำหรับผู้ช่วยคณิต
miniplex – ECS (ระบบการจัดการเอนทิตี)
composer-suite – การแต่งเชเดอร์ อนุภาค เอฟเฟกต์ และกลไกของเกม
triplex – โปรแกรมแก้ไขฉากสำหรับ react-three-fiber
koestlich – ไลบรารีส่วนประกอบ UI สำหรับปฏิกิริยาสามไฟเบอร์

แนวโน้มการใช้งานของตระกูล @react-three

ใครใช้ทรีไฟเบอร์อยู่บ้าง

บริษัทและโครงการจำนวนไม่มากที่ใช้ไฟเบอร์สามตัว

vercel (เอเจนซี่ออกแบบ)
basement (บริษัทออกแบบ)
studio freight (ตัวแทนออกแบบ)
14 islands (บริษัทออกแบบ)
ueno (เอเจนซี่ออกแบบ) — วีดีโอ
flux.ai (ตัวสร้าง PCB)
colorful.app (ผู้สร้างโมเดล)
bezi (นักสร้างโมเดล)
readyplayer.me (ตัวปรับแต่งอวตาร)
zillow (อสังหาริมทรัพย์)
lumalabs.ai/genie (โมเดล AI)
skybox.blockadelabs (AI envmaps)
3dconfig (เครื่องไสพื้น)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — วิดีโอ
triplex (โปรแกรมแก้ไข) — วิดีโอ
theatrejs (บรรณาธิการ) — วีดีโอ

วิธีการมีส่วนร่วม

หากคุณชอบโครงการนี้ โปรดพิจารณาช่วยเหลือ ยินดีต้อนรับการบริจาคทั้งหมด เช่นเดียวกับการบริจาคให้กับ Opencollective หรือใน crypto BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682