react three.js 둥실거리는 3d 이미지

참조문서

https://codesandbox.io/s/qyz5r?file=/src/App.js:103-123

3d 이미지

https://sketchfab.com/3d-models/dva-pistol-a42cf0f334dc4b8aa587e6a4e7d5fcd2

적용법

https://velog.io/@iepppop/react-three.js-%EC%A0%81%EC%9A%A9%EB%B2%95

example.js

function Model({ ...props }) {
    const group = useRef()
    const { nodes, materials } = useGLTF('/scene.gltf')
    useFrame((state) => {
        const t = state.clock.getElapsedTime()
        group.current.rotation.x = -Math.PI / 1.75 + Math.cos(t / 4) / 8
        group.current.rotation.y = Math.sin(t / 4) / 8
        group.current.rotation.z = (1 + Math.sin(t / 1.5)) / 20
        group.current.position.y = (1 + Math.sin(t / 1.5)) / 10
    })
    return (
        <group ref={group} {...props} dispose={null} scale={0.09}>
            <group rotation={[-Math.PI / 92, 6.5, 7.5]}>
                <group rotation={[Math.PI / 2, 0, 0]}>
                    ...
                </group>
            </group>
        </group>
    )
}

rotation 을 조정하면 움직이는 값이 변한다.

const Example3d = () => {
    return (
        <>
            <Contain>
                <Canvas>
                    <Suspense fallback={null}>
                        <directionalLight intensity={0.2} />
                        <ambientLight intensity={0.3} />
                        <spotLight intensity={0.5} angle={2} penumbra={1} position={[10, 15, 10]} castShadow />
                        <PresentationControls
                            global
                            cursor={true}
                            config={{ mass: 2, tension: 500, friction: 30}}
                            snap={{ mass: 4, tension: 1500 }}
                            rotation={[0, 0.3, 0]}
                            polar={[-Math.PI / 3, Math.PI / 3]}
                            azimuth={[-Math.PI / 1.4, Math.PI / 2]}>
                            <Model rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.25, 0]} scale={0.003} />
                        </PresentationControls>
                    </Suspense>
                </Canvas>
            </Contain>
        </>
    )
}

<PresentationControls> 를 세세하게 살펴보겠다.
cursor - cursor:pointer 여부이다.
config - 스프링 구성이다.

config={{ mass: 2, tension: 500, friction: 0}}
friction을 0으로 설정했더니 무한으로 튕겨지는 것을 볼 수 있다. 값이 커질 수록 튕김이 적어진다.

snap={{ mass: 10, tension: 500 }}
좀 더 느릿하게 튕겨지고 싶으면 tenstion의 값을 낮추면 된다.