4.three.js 를 리액트에서

three.js 를 리액트 에서 사용하기 위해서는 조금 다른 절차가 필요하다. 먼저 다음의 두 가지를 사용하는 것이 간편하다.

react-three/fiber

바닐라 js 에서는 객체를 만들어 scene.add 함수를 이용해서 넣어줬다. 하지만 리액트에서는 다른 방법으로 실행된다.

react-three/fiber 의 Canvas 가 scene 이라고 생각하면 된다. 그리고 그 안에 mesh 태그를 이용해서 mesh 를 만들어 주고 있다. mesh 에는 geometry 와 material 을 각각 태그로 추가 해주면 되고, 속성은 props 로 넘겨주면 된다

react-three/drei

몇몇 컴포넌트를 추가 할 때, 어떤 컴포넌트는 fiber 에 있고, 어떤 것은 drei 에 있기 때문에 , 둘다 설치 해 주어야 한다. 예를 들어 Canvas 는 fiber 에 있지만, OrbitControls 는 drei 에 들어있다.

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <>
      <div>
        <h1>HelloWorld</h1>

        <Canvas className="canvas" shadows>
					<OrbitControls />
          <mesh>
            <boxGeometry args={[5, 5, 5]} />
            <meshBasicMaterial />
          </mesh>
        </Canvas>
      </div>
    </>
  );
}

카메라를 추가해준 코드가 없지만, default 값으로 PerspectiveCamera 가 추가 되어있기 때문에 , 문제 없이 작동한다.