R3F 코드 정리

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

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

또는

npm install three @react-three/fiber

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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는 컴포넌트인데, 코드는 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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를 적용할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다