[ThreeJS] 설치 / 기본 뼈대 이해하기 Renderer, Scene, Camera

설치

npm install three

npm install @react-three/fiber

npm install @react-three/drei

Renderer, Scene, Camera 기본 역할

Scene에 3D object를 놓고 Camera로 비춘 후 Renderer를 통해 html에 보여준다.

Renderer - Scene과 Camera의 객체 데이터를 넘겨받아서 화면 안에 이미지로 렌더링을 하는 역할.

Scene - 특정한 장면 안에 Geometry와 Material로 이루어진 Mesh, 3D object, 빛, 안개, 배경색 등의 요소를 포함하고 있는 최상위 노드.

Camera - Scene에 담긴 3D 공간에 대한 정보 데이터를 카메라로 특정 위치를 비춰서 담긴 부분만 Renderer에 넘긴다.

---

react-three

npm install @react-three/fiber

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

npm install @react-three/drei

https://github.com/pmndrs/drei

npm install @react-three/postprocessing

https://docs.pmnd.rs/react-postprocessing/effect-composer

기본적으로 fiber, 도움을 주는 drei와 postprocssing 가 필요하다

타입스크립트에서 사용하려면 npm install --save-dev @types/three 까지 해줘야하나보다

---

간단한 예시

---

컴포넌트로서의 기본적인 구조.

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

function CarShow() {
  return (
    <>
      <OrbitControls target={[0, 1, 0]} maxPolarAngle={1} />

      <PerspectiveCamera makeDefault fov={50} position={[3, 2, 5]} />

      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshBasicMaterial color={"red"} />
      </mesh>
    </>
  );
}

function Etc() {
  return (
    <Canvas>
      <CarShow />
    </Canvas>
  );
}

기본적으로 Canvas안에 담는다.

OrbitControls - 궤도 컨트롤 PerspectiveCamera - 시점 카메라

OrbitControls 부터 보자면 target 안의 3개의 요소는 말 그대로 궤도를 컨트롤할 때의 축을 의미하는 것 같은데..

다른 강의를 더 봐야겠다..