react-three-fiber를 사용하여 React 및 Three.js에 대해 알아보기

오늘은 React 및 React Native 애플리케이션에서 3D 모델과 애니메이션을 빌드하고 표시하기 위해 react-three-fiber 를 구성하고 사용하는 방법을 배울 것입니다.

이 튜토리얼은 React를 사용하여 웹에서 3D 모델 애니메이션에 대해 더 배우고자 하는 개발자와 캔버스를 생성할 수 없고 click 이벤트와 같은 사용자 이벤트를 바인딩하고 렌더 루프, react-three-fiber 를 시작할 수 없는 것과 같이 Three.js에 제한이 있는 모든 사람을 위한 것입니다. react-three-fiber 는 이러한 방법과 함께 제공됩니다. react-three-fiber 를 사용하여 Three.js 3D 모델을 빌드하는 방법을 더 잘 이해하기 위해 3D 모델을 빌드합니다.

react-three-fiber 시작하기

Three.js는 브라우저에서 3D 그래픽을 더 쉽게 생성할 수 있게 해주는 라이브러리입니다. 캔버스 + WebGL을 사용하여 3D 모델과 애니메이션을 표시합니다. 여기에서 자세히 알아볼 수 있습니다.

react-three-fiber는 웹 및 react-native용 React 렌더러입니다. 3D 모델 및 애니메이션이 있는 사이트의 일부 예인 Three.js를 사용하여 3D 모델 및 애니메이션을 만드는 속도를 향상시킵니다. 여기에서 찾을 수 있습니다. react-three-fiber 는 재사용 가능한 구성 요소, 바인딩 이벤트 및 렌더 루프로 인해 애니메이션에 소요되는 시간을 줄입니다. 먼저 Three.js가 무엇인지 살펴보겠습니다.

react-three-fiber 를 사용하면 React 상태, 후크 및 소품을 사용하여 threeJS 코드의 구성 요소를 빌드할 수 있으며 다음 요소도 함께 제공됩니다.

react-three-fiber 를 사용하는 방법

react-three-fiber 를 사용하려면 아래 명령을 사용하여 시작합니다.

NPM

 npm i three react-three-fiber

실

 yarn add three react-three-fiber

참고 : react-three-fiber 가 작동하려면 위에서 했던 것처럼 three (Three.js)를 설치해야 합니다.

React 3D Ludo 주사위 모델 및 애니메이션 프로젝트 구축

여기서 우리는 아래 비디오에서와 같이 react-three-fiber 를 사용하여 3D 루도 주사위 모델을 만들 것입니다.

프로젝트를 초기화하기 create-react-app 을 사용할 것입니다. 그렇게 하려면 터미널에서 아래 명령을 실행하겠습니다.

 create-react-app react-three-fiber-ludo-model

위의 명령은 로컬 시스템 내에서 React 프로젝트를 초기화합니다. 다음으로 디렉토리에 cd 하고 react-three-fiber 및 three 패키지를 설치하겠습니다.

 cd react-three-fiber-ludo-model npm i three react-three-fiber

패키지가 설치되면 다음 명령을 사용하여 개발 서버를 시작하겠습니다.

 npm start

위의 명령은 브라우저에서 프로젝트 개발 서버를 시작해야 합니다. 다음으로 선택한 텍스트 편집기에서 프로젝트를 열고 프로젝트 src 폴더 내에서 App.css , App.test.js , serviceWorker.js 및 setupTests.js 파일을 삭제합니다. 다음으로 App.js 에서 삭제된 파일을 참조하는 모든 코드를 삭제하겠습니다.

이 프로젝트의 경우 루도 주사위를 위한 Box 구성 요소와 React에서 제공한 App 구성 요소가 필요합니다.

Box 구성 요소 만들기

Box 구성 요소에는 루도 주사위의 모양, 루도 주사위 이미지 및 항상 회전 상태를 유지하는 상태가 포함됩니다. 먼저 아래의 Box 구성 요소에 필요한 모든 패키지를 가져오겠습니다.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

위의 코드에서는 useRef , useState 및 useMemo 를 가져옵니다. useRef useState 를 사용하여 루도 주사위의 활성 상태를 확인합니다. useMemo 후크는 주사위의 숫자를 반환하는 데 사용됩니다. 다음으로 react-three-fiber 에서 Canvas 와 useFrame 을 가져오고 canvas 는 브라우저에서 그래픽을 그리는 데 사용되는 반면 useFrame 은 구성 요소가 렌더 루프에 연결되도록 하여 한 구성 요소가 렌더링될 수 있도록 합니다. 다른 사람의 내용. 다음으로 three 패키지를 가져온 다음 ludo 주사위의 정적 이미지를 가져왔습니다.

다음은 Box 구성 요소에 대한 논리를 작성하는 것입니다. 먼저 기능적 구성 요소를 구축하는 것으로 시작하고 구성 요소에 상태를 추가합니다. 아래에서 수행하겠습니다.

 const Box = (props) => { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() => { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() => new THREE.TextureLoader().load(five), []); return ( <Box /> ); }

위의 코드에서 우리는 props를 사용하여 Box 컴포넌트를 생성하고 있습니다. 다음으로 useRef 후크를 사용하여 mesh 라는 ref를 생성하고 매번 동일한 메시를 반환할 수 있도록 이렇게 했습니다.

메쉬는 장면의 시각적 요소이며 삼각형 다각형을 구성하는 3D 개체이며 일반적으로 모델의 모양을 정의하는 데 사용되는 지오메트리 와 모델의 모양을 정의하는 재질 을 사용하여 만들어집니다. 여기에서 메시에 대해 배우고, 여기에서 useRef 후크에 대해 자세히 알아볼 수도 있습니다.

mesh 를 초기화한 후 useState 후크를 사용하여 애플리케이션의 상태를 초기화해야 합니다. 여기서 애플리케이션의 호버링 및 활성 상태를 false로 설정합니다.

다음으로 react-three-fiber 의 useFrame 후크를 사용하여 아래 코드를 사용하여 메쉬(ludo 주사위)를 회전합니다.

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

여기에서 우리는 매 0.01초마다 메쉬의 현재 위치를 회전시키고 있습니다. 이것은 회전에 좋은 애니메이션을 주기 위해 수행됩니다.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

위의 코드에서 우리는 texture 라는 상수를 만들고 새로운 주사위 롤을 로드하는 함수로 반응 useMemo 후크를 전달합니다. 여기에서는 주사위 이미지와 숫자를 기억하기 위한 useMemo 입니다. 여기에서 useMemo 후크에 대해 배울 수 있습니다.

다음으로 브라우저에서 Box 구성 요소를 렌더링하고 이벤트를 추가하려고 합니다. 아래에서 수행합니다.

 const Box = (props) => { return ( <mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) => setActive(!active)} > <boxBufferGeometry args={[1, 1, 1]} /> <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}> <primitive attach="map" object={texture} /> </meshBasicMaterial> </mesh> ); }

위의 코드에서 우리는 Box 컴포넌트를 반환하고 Spread 연산자를 사용하여 Box 컴포넌트의 모든 속성을 전달한 다음 useRef 후크를 사용하여 mesh 를 참조했습니다. 다음으로 Three.js의 scale 속성을 사용하여 주사위 상자가 활성화되어 있을 때 크기를 2로 설정하고 그렇지 않을 때 1.5로 설정합니다. 마지막으로 기본 설정이 아닌 경우 state 를 active 으로 설정하는 onClick 이벤트를 추가했습니다.

 <boxBufferGeometry args={[1, 1, 1]} />

주사위 상자를 렌더링하기 위해 Three.js에서 boxBufferGeometry 구성 요소를 렌더링했으며 boxBufferGeometry 는 상자와 같은 선과 점을 그리는 데 도움이되며 args 인수를 사용하여 상자 기하학의 크기와 같은 생성자를 전달합니다.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

Three.js의 meshBasicMaterial 은 지오메트리를 간단한 형태로 그리는 데 사용됩니다. 여기서 우리는 attach 속성을 전달하고 THREE.DoubleSide 소품을 side 속성에 전달했습니다. THREE.DoubleSide 는 react-three-fiber 에 의해 렌더링되어야 하는 측면 또는 공간을 정의합니다.

 <primitive attach="map" object={texture} />

Three.js의 primitive 구성 요소는 3D 그래프를 그리는 데 사용됩니다. 루도 주사위의 원래 모양을 유지하기 위해 map 속성을 추가했습니다. 다음으로 App.js 파일에서 Box 구성 요소를 렌더링하고 3D 루도 주사위 상자를 완성할 것입니다. 구성 요소는 아래 이미지와 유사해야 합니다.

3D 루도 주사위 상자 렌더링

이 섹션에서는 App.js에서 Box 구성 요소를 렌더링하고 3D App.js 상자를 완성할 것입니다. 먼저 이를 수행하기 위해 App 구성 요소를 만들고 Canvas 태그로 래핑하겠습니다. 이것은 3D 모델을 렌더링하는 것입니다. 아래에서 해보자.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

다음으로 상자에 조명을 추가해 보겠습니다. react-three-fiber 는 모델을 조명하기 위한 세 가지 구성 요소를 제공합니다. 구성 요소는 다음과 같습니다.

• ambientLight
  이것은 장면이나 모델의 모든 객체에 동일하게 조명을 비추는 데 사용되며, 조명의 강도와 같은 소품을 허용하고 루도 주사위의 몸체를 비춥니다.
• spotLight
  이 빛은 한 방향에서 방출되며 물체의 크기가 증가함에 따라 증가하여 루도 주사위의 포인트를 밝힙니다.
• pointLight
  이것은 전구의 빛과 유사하게 작동합니다. 빛은 한 지점에서 모든 방향으로 방출됩니다. 이것은 우리 응용 프로그램의 활성 상태에 필요합니다.

아래의 애플리케이션에 위의 사항을 구현해 보겠습니다.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

위의 코드에서 우리는 react-three-fiber 에서 ambientLight 구성 요소를 가져오고 0.5의 강도를 추가한 다음 spotLight 및 pointLight 구성 요소에 위치와 각도를 추가했습니다. 응용 프로그램의 마지막 단계는 상자 구성 요소를 렌더링하고 루도 주사위 상자에 위치를 추가하는 것입니다. 아래 코드에서 수행할 것입니다.

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

완료되면 ludo 3D 주사위가 아래 이미지와 유사해야 합니다.

CodeSandbox에서 작업 데모를 사용할 수 있습니다.

결론

react-three-fiber 를 사용하면 React 및 React Native 애플리케이션용으로 3D 모델 및 애니메이션 렌더링을 더 쉽게 만들 수 있습니다. 3D 루도 주사위 상자를 구축함으로써 우리는 React react-three-fiber 의 구성 요소 및 이점과 함께 Three.js의 기본 사항과 사용 방법에 대해 배웠습니다.

react-three-fiber 를 자체적으로 사용하여 React 및 Native 애플리케이션에서 3D 모델과 애니메이션을 구축함으로써 이를 더 발전시킬 수 있습니다. 어떤 새로운 것들이 나올지 보고 싶어요!

아래 참조에서 Three.js 및 react-three-fiber 에 대해 자세히 알아볼 수 있습니다.

관련 리소스

• Three.js 문서
• Three.js 기초
• Poimandres의 React-Three-fiber GitHub 리포지토리
• react-three-fiber 문서
• React Hooks(useState, useMemo 등) 공식 문서