@react-three/ファイバー

React-three-fiber は、threejs 用の React レンダラーです。

状態に反応し、容易にインタラクティブで、React のエコシステムに参加できる、再利用可能な自己完結型コンポーネントを使用してシーンを宣言的に構築します。

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

制限はありますか?

なし。 Threejs で動作するものはすべて例外なくここでも動作します。

普通の Threejs より遅いですか?

いいえ。オーバーヘッドはありません。コンポーネントは React の外部でレンダリングされます。 React のスケジューリング能力により、規模の点で Threejs よりも優れています。

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 の例を表示

この例は、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またはuseGLTFやuseTextureなどの Drei 抽象化を使用する場合、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 >
  )
}

ドキュメント、チュートリアル、例

docs.pmnd.rs にアクセスしてください

最初のステップ

これに取り掛かる前に、React と Threejs の両方に精通している必要があります。 React についてよくわからない場合は、公式の React ドキュメント、特にフックに関するセクションを参照してください。 Threejs については、少なくとも次のリンクに目を通してください。

Threejs の基本を理解していることを確認してください。そのサイトを開いたままにしておきます。
シーン、カメラ、メッシュ、ジオメトリ、マテリアルが何であるかがわかったら、上記のデモをフォークします。
表示される JSX 要素 (メッシュ、ambientLight など) を調べてください。threejs のエクスポートはすべて、 three-fiber に対してネイティブです。
いくつかの値を変更してみて、API をスクロールして、さまざまな設定とフックが何を行うかを確認してください。

役立つ資料:

Threejs-docs と例
Threejs、特にベストプラクティスに関するヒントとコツの章をご覧ください。
おそらく最高の学習リソースである Bruno Simons Threejs Jouney に、R3F の完全な章が含まれるようになりました

生態系

スリーファイバーの周りには、ライブラリ、ヘルパー、抽象化が満載の活気に満ちた広範なエコシステムがあります。

@react-three/drei – 便利なヘルパー、これ自体がエコシステムです
@react-three/gltfjsx – GLTF を JSX コンポーネントに変換します
@react-three/postprocessing – 後処理効果
@react-three/uikit – 3 ファイバー用の WebGL レンダリングされた UI コンポーネント
@react-three/test-renderer – ノードでの単体テスト用
@react-three/offscreen – React-three-fiber のオフスクリーン/ワーカーキャンバス
@react-three/flex – React-three-fiber 用のフレックスボックス
@react-three/xr – VR/AR コントローラーとイベント
@react-three/csg – 構築的なソリッドジオメトリ
@react-three/rapier – Rapier を使用した 3D 物理学
@react-three/cannon – Cannon を使用した 3D 物理学
@react-three/p2 – P2 を使用した 2D 物理学
@react-three/a11y – シーンの実際の a11y
@react-three/gpu-pathtracer – 現実的なパストレース
create-r3f-app next – nextjs スターター
lamina – レイヤーベースのシェーダーマテリアル
zustand – フラックスベースの状態管理
jotai – アトムベースの状態管理
valtio – プロキシベースの状態管理
react-spring – スプリング物理ベースのアニメーションライブラリ
framer-motion-3d – フレーマーモーション、人気のあるアニメーションライブラリ
use-gesture – マウス/タッチジェスチャ
leva – 数秒で GUI コントロールを作成
maath – 数学ヘルパーのためのキッチンシンク
miniplex – ECS (エンティティ管理システム)
composer-suite – シェーダー、パーティクル、エフェクト、ゲームメカニクスを構成する
triplex – React-Three-Fiber 用のシーンエディター
koestlich – React-three-fiber の UI コンポーネントライブラリ

@react-threeファミリーの利用傾向

スリーファイバーを使用しているのは誰ですか

3 ファイバーに依存する少数の企業とプロジェクト。

vercel （デザイン事務所）
basement （デザイン事務所）
studio freight （デザイン事務所）
14 islands （設計事務所）
ueno （デザイン事務所） — ビデオ
flux.ai (PCB ビルダー)
colorful.app (モデラー)
bezi (モデラー)
readyplayer.me (アバターコンフィギュレーター)
zillow （不動産）
lumalabs.ai/genie (AI モデル)
skybox.blockadelabs (AI 環境マップ)
3dconfig (フロアプランナー)
buerli.io (CAD)
getencube （CAD）
glowbuzzer (CAD) — ビデオ
triplex (編集者) — ビデオ
theatrejs (編集者) — ビデオ

貢献方法

このプロジェクトが気に入っていただけましたら、ぜひご協力をご検討ください。すべての寄付はもちろん、Opencollective への寄付、または暗号通貨BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH 、 ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682での寄付も歓迎します。