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(
<canvas>
<mythree></mythree>
</canvas>
)
import { Canvas } from "@react-three/fiber"
import MyThree from './MyThree'
const root = createRoot(document.querySelector('#root'))
root.render(
<canvas>
<mythree></mythree>
</canvas>
)
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 <>
<ambientlight intensity="{0.25}"></ambientlight>
<directionallight position="{[1,2,3]}" intensity="{1.5}"></directionallight>
<mesh ref="{cubeRef}" scale="{2}">
<boxgeometry></boxgeometry>
<meshnormalmaterial></meshnormalmaterial>
</mesh>
<orbitcontrols args="{[camera," gl.domelement="" ]}=""></orbitcontrols>
</>
}
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 <>
<ambientlight intensity="{0.25}"></ambientlight>
<directionallight position="{[1,2,3]}" intensity="{1.5}"></directionallight>
<mesh ref="{cubeRef}" scale="{2}">
<boxgeometry></boxgeometry>
<meshnormalmaterial></meshnormalmaterial>
</mesh>
<orbitcontrols args="{[camera," gl.domelement="" ]}=""></orbitcontrols>
</>
}
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를 적용할 수 있습니다.