@реакт-три/волокно

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 , но вы можете создать пустой проект с их шаблоном или с помощью 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 о ваших ресурсах, если вы используете абстракции useLoader или Drei, такие как 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, особенно к разделу, посвященному хукам. Что касается Threejs, обязательно просмотрите хотя бы следующие ссылки:

Убедитесь, что у вас есть базовые знания Threejs. Держите этот сайт открытым.
Когда вы знаете, что такое сцена, камера, сетка, геометрия, материал, вы можете использовать приведенную выше демонстрацию.
Найдите элементы JSX, которые вы видите (сетка, AmbientLight и т. д.), все файлы экспорта Threejs являются родными для Three-Fiber.
Попробуйте изменить некоторые значения, прокрутите наш API, чтобы увидеть, что делают различные настройки и перехватчики.

Немного полезного материала:

Threejs-документация и примеры
Откройте для себя Threejs, особенно главу «Советы и рекомендации», где собраны лучшие практики.
Bruno Simons Threejs Jouney, возможно, лучший учебный ресурс, теперь включает полную главу R3F.

Экосистема

Вокруг трехволокна существует яркая и обширная экосистема, полная библиотек, помощников и абстракций.

@react-three/drei — полезные помощники, это сама по себе экосистема
@react-three/gltfjsx — превращает GLTF в компоненты JSX.
@react-three/postprocessing – эффекты постобработки
@react-three/uikit — WebGL отображает компоненты пользовательского интерфейса для трехволоконных
@react-three/test-renderer — для модульных тестов в узле.
@react-three/offscreen – внеэкранный/рабочий холст для React-three-fiber
@react-three/flex — flexbox для React-three-fiber
@react-three/xr — контроллеры и события VR/AR
@react-three/csg — конструктивная твердотельная геометрия
@react-three/rapier – 3D-физика с использованием Rapier
@react-three/cannon – 3D-физика с использованием Cannon
@react-three/p2 – 2D-физика с использованием P2
@react-three/a11y – настоящий привет для вашей сцены
@react-three/gpu-pathtracer – реалистичная трассировка пути
create-r3f-app next – стартер nextjs
lamina — шейдерные материалы на основе слоев
zustand – управление состоянием на основе потоков
jotai — управление состоянием на основе атомов
valtio — управление состоянием на основе прокси
react-spring — библиотека анимации, основанная на Spring-физике.
framer-motion-3d — Framer Motion, популярная библиотека анимации.
use-gesture – жесты мыши/прикосновения
leva – создайте элементы управления графическим интерфейсом за считанные секунды
maath – кухонная мойка для помощников по математике
miniplex – ECS (система управления объектами)
composer-suite — создание шейдеров, частиц, эффектов и игровой механики.
triplex — редактор сцен для React-Three-Fiber
koestlich — библиотека компонентов пользовательского интерфейса для реагирования на три волокна

Тенденция использования семейства @react-three

Кто использует трехволоконный

Небольшой выбор компаний и проектов, использующих три волокна.

vercel (дизайнерское агентство)
basement (дизайнерское агентство)
studio freight (дизайнерское агентство)
14 islands (дизайнерское агентство)
ueno (дизайнерское агентство) — видео
flux.ai (создатель печатных плат)
colorful.app (модельер)
bezi (моделист)
readyplayer.me (конфигуратор аватаров)
zillow (недвижимость)
lumalabs.ai/genie (модели искусственного интеллекта)
skybox.blockadelabs (AI envmaps)
3dconfig (планировщик пола)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — видео
triplex (монтаж) — видео
theatrejs (редактор) — видео

Как внести свой вклад

Если вам нравится этот проект, пожалуйста, подумайте о помощи. Приветствуются все взносы, а также пожертвования в Opencollective или в криптовалюте BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .