@반응-3/섬유

반응-3-섬유는 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 예제 보기

이 예제는 반응 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

useGLTF 및 useTexture 와 같은 useLoader 또는 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 요소(mesh,ambientLight 등)를 찾아보세요. 모든 threejs 내보내기는 three-fibre에 기본입니다.
일부 값을 변경해 보고 API를 스크롤하여 다양한 설정과 후크의 기능을 확인하세요.

유용한 자료:

Threejs 문서 및 예제
Threejs를 살펴보세요. 특히 모범 사례에 대한 팁과 요령 장을 살펴보세요.
틀림없이 최고의 학습 리소스인 Bruno Simons Threejs Jouney에 이제 전체 R3F 챕터가 포함되어 있습니다.

생태계

라이브러리, 도우미 및 추상화로 가득 찬 3개 광섬유 주변에는 활기차고 광범위한 에코 시스템이 있습니다.

@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-3 제품군 사용 동향

Three-Fiber를 사용하는 사람은 누구입니까?

3광섬유에 의존하는 소수의 기업과 프로젝트.

vercel (디자인 에이전시)
basement (디자인 에이전시)
studio freight (디자인 에이전시)
14 islands (디자인 에이전시)
ueno (디자인 에이전시) — 비디오
flux.ai (PCB 빌더)
colorful.app (모델러)
bezi (모델러)
readyplayer.me (아바타 구성기)
zillow (부동산)
lumalabs.ai/genie 모델)
skybox.blockadelabs (AI 환경 맵)
3dconfig (바닥 대패)
buerli.io (CAD)
getencube (CAD)
glowbuzzer (CAD) — 비디오
triplex (편집기) — 비디오
theatrejs (편집자) — 비디오

기여하는 방법

이 프로젝트가 마음에 드신다면 도움을 주시길 바랍니다. 모든 기여와 Opencollective 또는 암호화폐 BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH , ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 에 대한 기부를 환영합니다.