R3F 코드 정리

R3F는 다음처럼 설치될 수 있습니다.

npm install three@0.148 @react-three/fiber@8.9

또는

npm install three @react-three/fiber

시작점이 되는 index.jsx 코드 예는 다음과 같습니다.

import { Canvas } from "@react-three/fiber"
import MyThree from './MyThree'

const root = createRoot(document.querySelector('#root'))

root.render(
    
        
    
)

MyThree는 컴포넌트인데, 코드는 다음과 같습니다.

import { extend, useFrame, useThree } from "@react-three/fiber"
import { useRef } from "react"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

extend({ OrbitControls })

export default function MyThree() {
    const cubeRef = useRef()

    useFrame((state, delta) => {
        cubeRef.current.rotation.y += delta
    })

    const { camera, gl } = useThree()

    return <>
        
        

        
            
            
        

        
    </>
}

큐브 회전에 대한 애니메이션 처리와 OrbitControls가 적용된 코드입니다. 물론 drei를 사용하면 더욱 간단히 OrbitControls를 적용할 수 있습니다.