Three.js-React Three Fiber

Canvas

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

export default function FiberModel() {
    return (
    //by deafult 로, camera props 을 따로 추가 하지 않으면 position: [0,0,5]를 가진다.
        <Canvas camera={{ position: [0,0,5} }>
        <PerspectiveCamera  makeDefault fov={75}, position={[0,0,10} />
            <mesh>
                <boxGeometry attach="geometry" />
                <meshStandardMaterial attach="material" />
            </mesh>
        </Canvas>
    );
}

• 위의 fiber 기본 셋팅에서, 는 three.js 의 기본 scene 을 렌더 해준다.

• scene, camera, animate 또한 Canvas 에서 handling 할 수 있다.

• 태그는 아래의 three.js 코드와 동일하다.

  const cube = new Mesh();
  
  const geometry = new BoxGemoetry();
  const material = new MeshStandardMaterial();
  
  cube. geometry = geometry;
  cube.material = materiall;
  
  scene.add(cube

  • boxGeometry 태그는 cube.geometry = new BoxGeometry 와 동일 하다. attach 는 자동으로 핸들을 해주므로 필수는 아니다(geometry 로 끝나는 변수는 자동으로 attach 해준다)

• 거의 모든 fiber 태그들은 args={[]} 를 가지고 있는데, 이는 threejs class 에 직접적으로 줄수 있는 arguments 를 뜻한다

   const geometry = new BoxGeometry(2,2,2);
   
   //above is equivalent to below
   <boxGeometry args={[2,2,2]} />