[R3F 알아보기]

React Three Fiber

공식 문서: https://docs.pmnd.rs/react-three-fiber

기존 Threejs 와 어떤점이 다른가요?

• React 에 친화적
• jsx 문법 사용
• 같은 기능을 구현 시 코드 양이 적음
• 동일한 기능을 하는 Shortcut 기능(drei, postprocessing 등)이 존재함

    <Canvas
      // Renderer 을 설정
      gl={{ antialias: true }}
      // shadows={{ enabled: true, type: THREE.PCFSoftShadowMap }} 와 동일
      shadows={'soft'}
      camera={{
        fov: 60,
        aspect: window.innerWidth / window.innerHeight,
        near: 0.1,
        far: 100,
        // 카메라의 위치
        position: [5, 5, 5],
      }}
      // 초기 렌더링시 배경 색 (한번 설정하고 변하지 않을때 사용)
      scene={{ background: new Color(0x000000) }}
    >
      // 배경 색 (자주 변할 때 사용)
      {/* <color attach="background" args={["rgb(67, 127, 240) 100%)"]} /> */ }
  	  // drei 에서 제공하는 Controls
  	  <OrbitControls />
      // 빛 설정
  	  <directionalLight
      ...
      />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshBasicMaterial color={0x00ff00} />
      </mesh>
    </Canvas>