이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.
https://www.youtube.com/watch?v=y5CAuAZ7kKM&list=PLIRTsuB0iPJvxaYyg8MOrjffPPcYnccL0&index=1
web에서 3d를 사용하려면? WebGL을 사용하면 된다.
1. WebGL의 문제점?
⇒ 너무 복잡하다! Low level이에요
⇒ 따라서 Three.js를 사용한다.
⇒ React Three Fiber를 사용하는 이유는 React는 React 만의 Dom 을 사용하기 때문에 + 리액트만의 Component 스타일로 three.js를 사용하기 위해서
2. React + Typescript에서 시작해보자
(일단 cra든 vite든 프로젝트를 시작했다는 가정하에)
$ npm install three
$ npm install @react-three/fiber @react-three/drei @types/three gsap
뒤에 gsap은 동작을 훨씬 부드럽게 만들어주는 자바스크립트 라이브러리이다.
여담이지만 리액트가 처음이라면 typescript를 이용해서 react three fiber를 사용하지 말자. 뒤에 나오겠지만 type 지정하는게 너무 힘들다 😢
3. 개념잡기
1. Scene
내가 상상하는 한 장면을 “Scene” 이라고 한다.
2. Camera
위의 “장면” 을 보는 관점이 camera. 관점이 달라질 때마다 render 됩니다.
3. Canvas
2D 화면에 어떻게 3D 장면이 보이는 걸까? ⇒ <canvas> 태그를 사용해서 그렇다. 한마디로 3D 모델을 올릴 수 있는 도화지를 만드는 거다.
내가 <canvas> tag를 사용한 위치에 webgl, three.js가 렌더링해서 보여준다.
react-three/fiber 에서는 <Canvas> 라는 컴포넌트를 사용하면 된다.
tutorial > index.tsx
import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import Three from '@/components/Three'
function TutorialMainPage() {
return (
<div>
TutorialMainPage
<Canvas className="h-[100vh]">
<Suspense fallback={null}>
<Three />
</Suspense>
</Canvas>
</div>
)
}
export default TutorialMainPage4. Suspense
Suspense는 lazy loading(비동기) 을 허용하기 위해 사용한다.
아래 코드에서는 <Three> 라는 컴포넌트가 용량이 커서 로딩되고 있을 때, fallback 안에 있는 요소(지금은 null) 가 대신 보여집니다.
tutorial > index.tsx
import { Html } from '@react-three/drei'
function TutorialMainPage() {
return (
<>
TutorialMainPage
<Canvas className="h-[100vh]">
<Html>
<div>HEllo World!</div>
</Html>
<Suspense fallback={null}>{/* <Three /> */}</Suspense>
</Canvas>
</>
)
}5. react-three/drei
react-three-fiber를 쉽게 사용할 수 있도록 도와주는 친구 <Html> 태그는 Html 요소를 쉽게 사용할 수 있게 도와줍니다. Canvas 안에 있다고 하더라도, 렌더링 되지 않습니다.
components>Three.tsx
import React from 'react'
function Three() {
return <></>
}
export default Three
6. Default
위에서 three.js에는 기본적으로 scene과 camera를 필요로 한다고 했지만, react-three-fiber는 기본적으로 scene과 camera를 제공하기 때문에! 따로 요소를 명시하지 않아도 비어있는 상태로 보여준다.
4. Error 해결
typescript, eslint를 함께 사용하다보니 에러가 많이 발생한다.
이번에는
라는 에러가 발생했다. eslint 상의 에러라서 실행에는 문제가 없지만, 다음을 추가해주면 해결된다.
// .eslintrc.cjs
...
rules: {
'react/no-unknown-property': [
'error',
{ ignore: ['args', 'rotation', 'position'] },
],
...
]
Uploaded by N2T