본 글은 유튜브 GIS DEVELOPER 님의 R3F(React Three Fiber)를 이용한 3D 웹 개발 강의를 듣고 정리한 글입니다.
https://www.youtube.com/playlist?list=PLe6NQuuFBu7HUeJkowKRkLWwkdOlhwrje

📖 R3F의 Canvas

📌 Canvas

✅ Canvas의 구성요소

• Canvas : 3D 그래픽 기능을 위해 가장 먼저 만들어야 할 객체

  • Renderer

    • Scene과 Camera를 이용해서 GPU(그래픽 카드)로 3D 그래픽을 출력(렌더링) 해주는 객체

  • Scene : 3D 장면

    • 3D 모델
    • 조명
    • 카메라

  • Camera

    • 동일한 Scene이라도 카메라로 보는 방법과 방향에 따라 다르게 연출된다.

📌 Canvas 관련 실습

✅ 3차원 정육면체 모델 생성, 색상 정의, 조명 설치

• App.jsx

import './App.css'
import { Canvas } from '@react-three/fiber'
import MyElement3D from './MyElement3D'

function App() {
  return (
    <>
      	<Canvas>
            // 컴포넌트 호출
          	<MyElement3D />
      	</Canvas>
    </>
  )
}

export default App

• MyElement3D.jsx (컴포넌트)

function MyElement3D {
 	return (
    	<>
        	// 조명 설정
        	<directionalLight position={[1, 1, 1]} />
        
        	// mesh : 3차원 모델
        	<mesh>
              // boxGeometry : 정육면체
              <boxGeometry />
              
              // mesh의 색상을 정의하기 위해 material 설정
              <meshStandardMaterial color="#e67e22" />
        	</mesh>
        </>
    )
}

export default MyElement3D

• 약간의 CSS 조정 후 위 코드는 아래 사진이 된다.
  

✅ 회전

• MyElement3D.jsx

import { useRef } from "react"
import { useFrame } from "@react-three/fiber"

function MyElement3D {
  	// useRef 훅
    const refMesh = useRef()
  
    // delta : 이전 프레임과 현재 프레임 사이의 경과 시간 (단위 : 밀리초)
    useFrame((state, delta) => {
    	// 콜백함수 : 매 프레임이 렌더링 되기 전 호출되는 함수
      // 매 프레임마다 delta씩 회전 => 무한 회전
      refMesh.current.rotation.y += delta
    })
    
 	return (
    	<>
        	<directionalLight position={[1, 1, 1]} />
        
        	// y축 90도 방향 회전
        	<mesh ref={refMesh} rotation-y={[45*Math.PI/180]}>
              <boxGeometry />
              
              <meshStandardMaterial color="#e67e22" />
        	</mesh>
        </>
    )
}

export default MyElement3D

• R3F는 각도를 라디안(Radian) 기준으로 계산하기에, 적절한 변환이 필요하다.