[React / Three] 새 프로젝트 시작하기

1. 새로운 React 앱을 만든다. project 이름을 three-brick-app으로 설정

npx create-react-app three-brick-app
cd three-brick-app

2. Three와 React Renderer인 react-three-fiber 그리고 use-cannon, drei를 설치한다.

npm install three @react-three/fiber @react-three/cannon @react-three/drei

3. 간단한 Box Geometry 추가

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

function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas style={{ background: "black" }}>
        <mesh>
          <boxBufferGeometry />
          <meshBasicMaterial />
        </mesh>
      </Canvas>
    </div>
  );
}

4. Three.js에서 지원하는 Geometry는 다음과 같다