React Three Fiber 복기 1일차

React Three Fiber

 

React Three FIber란?

React Three Fiber 는 인기 있는 3D 라이브러리인 Three.js를 React 환경에서 쉽게 사용할 수 있게 해주는 라이브러리입니다.

Three.js의 복잡한 설정을 React 방식으로 쉽게 작성할 수 있게 해줍니다.

 

- Three.js: 웹에서 3D를 구현하는 강력한 도구 

- React: 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 

- React Three Fiber : 이 둘을 결합하여 React 방식으로 3D 구현 

 

 

https://r3f.docs.pmnd.rs/getting-started/introduction

Introduction - React Three Fiber

 

간단한 예시코드로 얼마나 React 에서 사용하기 쉬운지에 대해서 코드를 참고했습니다. 

 

import React from 'react'
import { Canvas } from '@react-three/fiber'

const App = () => (
  <Canvas>
    <pointLight position={[10, 10, 10]} />
    <mesh>
      <sphereGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </Canvas>
)

 

 

- React 스타일  : JSX 를 사용해 선언적으로 3D 요소를 구성할 수 있다. 

- 컴포넌트 재사용: 3D 객체를 독립적인 컴포넌트로 분리하여 재사용할 수 있습니다. 

- React 의 모든 기능 활용 : 상태 관리, 훅 등 .. React의 모든 기능을 3D 환경에서도 적용이 가능합니다. 

 

React를 통해서 3D 표현을 구현하고자 할때, 생각보다 다른 라이브러리 보단, 예시인 상황이나, 경험한 블로그들이 상대적으로 적어보여서 진입 장벽이 생각보다 높았다. 

 

하지만 React three Fiber 라이브러리를 조금이나마 이해하며 , 제공되는 API 기능들을 통해서 내가 구현하고자 하는 3D 웹 영역을 

하나하나 내것으로 만드는거에 대한 즐거움을 느끼고자  차근 차근 복기를 통해 완전히 내것으로 만들고자 하는 것이 제 목표입니다. 

 

위에 예시코드인 , Canvas , Camera 등등 내장된 API 기능들에 대한 복기를 다음 블로그를 작성해볼 예정입니다.