[R3F] Canvas에 상자 그리기 (TIL)

(좌) fov 25 / (우) fov 40

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

export const App = ({ position = [-1, 0, 2.5], fov = 25 }) => (
  <Canvas camera={{ position, fov }}>
    <Shirt />
  </Canvas>
);

function Shirt() {
  return (
    <mesh>
      <boxGeometry args={[0.9, 0.9, 0.9]} />
      <meshNormalMaterial />
    </mesh>
  );
}

<OrbitControls> 추가 해주면 빙글빙글 돌릴 수 있다

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

export const App = ({ position = [-1, 0, 2.5], fov = 25 }) => (
  <Canvas camera={{ position, fov }}>
    <Shirt />
    <OrbitControls />
    <Center />
  </Canvas>
);

function Shirt() {
  return (
    <mesh>
      <boxGeometry args={[0.9, 0.9, 0.9]} />
      <meshNormalMaterial />
    </mesh>
  );
}