바닐라 js로만 three.js를 써왔었다.
익숙했기도 하고 원서에서도 바닐라 js 기준이었기 때문에 자연스럽게 바닐라 js로만 사용하고 있었다.
그러나!! 리액트를 배우게 되며 바닐라 js보다는 리액트를 더 많이 사용하게 될 것이라고 생각하고, 리액트로 만들 웹페이지에도 three.js가 있으면 더 근사한 웹 페이지가 될 것 같아 오늘부터 공부 일지를 써보려고 한다.
공부할 공식 문서는 여기
설치
리액트 앱을 만들고 다음 코드를 통해 react-three-fiber 를 설치한다.
npm i react-three-fiber
First Scene
1) 웹페이지에 three.js 를 렌더해 줄 createRoot 함수와, three.js가 그려질 배경이 될 Canvas를 각각 import 해준다.
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';2) App 안에 Canvas를 작성하고, 그 밑에 mesh, mesh안에 Geometry, Mesh의 Material을 jsx 형태로 작성해준다.
3) root에 App을 렌더해준다.
function App() {
return (
<div className='canvas-container'>
<Canvas />
<mesh>
<boxGeometry />
<meshStandardMaterial />
</mesh>
</div>
);
}
createRoot(document.getElementById('root')).render(<App />);이 간단한 코드는 바닐라 js로 작성했을 때 다음과 같다.. 엄청나
이 코드를 실행하면.!!
아직 아무일도 없다
ㅋㅋㅋㅋ
Geometry의 속성과, 빛을 추가 안 해주어서 그렇다.
4) 속성 추가하기
<boxGeometry args={[2, 2, 2]} />이 코드는
new THREE.BoxGeometry(2,2,2)와 같은데, 다른 점은 리액트에서는 prop으로 속성을 받기 때문에 { } 안에 들어가고, arg를 prop으로 사용하기에 ( ) 형태가 아닌 배열 [] 형태라는 점이다.
5) 빛 추가하기
<ambientLight intensity={0.1} />
<directionalLight color='red' position={[0.0, 5]} />트러블슈팅
그러나... 화면에선 똑같이 아무 일도 없었고 나는 Camera를 추가해보았지만 역시 아무 일도 없고
export 'PerspectiveCamera' (imported as 'PerspectiveCamera') was not found in '@react-three/fiber'에러만 났다..
=> react-three/drei 를 설치해도 결과는 똑같았다.
=> 훅을 쓴 게 없는데 ' Hooks can only be used within the Canvas component!' 에러가 났다.
해답
canvas의 크기와, 색깔, 각 요소들의 position이 문제였다.ㅎㅎ
canvas를 100%, 100vh로 맞춰주고, position을 각각 조정해주었다. 또한 편리하게 보기 위해 Perspective Camera, Camera Helper를 각각 import해 추가했다.
<Canvas
camera={{ position: [5, 5, 0] }}
style={{ width: '100%', height: '100vh', background: 'blue' }}
>
<ambientLight intensity={0.1} />
<PerspectiveCamera position={[0.0, 4]} />
<CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 1.6} />
<directionalLight color='yellow' position={[0.0, 1, 0]} />
<mesh>
<boxGeometry args={[2, 2, 2]} position={[0, 5, 0]} />
<meshStandardMaterial color='aqua' />
</mesh>
</Canvas>내 첫 react에 three.js를 적용한 모습..!!
(Mesh의 aqua색과, light의 yellow가 결합 되어 연두로 보인다.)
다음은 이벤트를 추가해 봐야겠다 꺅 재밌다.
느낀 점
바닐라 js와 비교했을 때, 말도 안 되게 간편하고 쉬우며 코드가 짧아져서 신기하다.
또한, three.js가 프론트엔드 기술 변화에 발 맞추고 있는 것 같다는 생각이 강하게 들었다.
책이 5편까지 나온것만 봐도 그렇다...
5편 목차에 react 등과 같이 사용하는 목차가 따로 있던 것도...
하지만 짧고 아주 쉬운 scene을 만들었음에도, 기본 지식이 결국 근간이라는 것을 느꼈다.
바닐라 js 기반 책을 구한게 다행이고.. 저 책을 통해 three.js의 궁극적인 지식을 넓혀야함이 와닿는다.
빨리 훅도 추가하고, prop도 사용해서 리액트의 강점을 적용하며 배워봐야겠다.
