@react-三/纖維

React-Three-Fiber 是 ThreeJS 的 React 渲染器。

使用可重複使用、獨立的元件以聲明方式建立場景，這些元件對狀態做出反應、易於互動並且可以參與 React 的生態系統。

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

它有限制嗎？

沒有任何。在 Threejs 中工作的所有內容都可以在這裡工作，沒有例外。

它比普通的 Threejs 慢嗎？

不會。元件在 React 之外渲染。由於 React 的調度能力，它在規模上優於 Threejs。

它能跟上 Threejs 頻繁的功能更新嗎？

是的。它只是在 JSX 中表達 Threejs，動態地變成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 範例

此範例依賴react 18並使用expo-cli ，但您可以使用其模板或react-native CLI建立一個裸項目。

 # 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

如果您使用useLoader或 Drei 抽象（例如useGLTF和useTexture ，可能需要進行一些配置來告訴 Metro 捆綁程序有關您的資產的資訊：

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