react three.js 빙글빙글 도는 3d 이미지

이미지 주소

https://sketchfab.com/3d-models/genji-sword-73fdb514ebc847e29ee84b840ef75e38

적용법 - 이전글 참고

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

useFrame(() => (group.current.rotation.y += 0.01))
넣어질 위치는 아래 참고
방향은 x,y,z 가 있다. 적절하게 바꿔주면 된다.

import { Suspense, useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

  function Model({ ...props }) {
    const group = useRef()
    const { nodes, materials } = useGLTF('/scene.gltf')
    useFrame(() => (group.current.rotation.y += 0.01)) //이 곳!
    return (
      <group ref={group} {...props} dispose={null} scale={0.007}>
        <group position={[0, 0.02, 0]} rotation={[0, 1, Math.PI]}>
          <group rotation={[Math.PI / 30, 20, 0]}>
            <group position={[0, 100, -19.64]} rotation={[-Math.PI / 1, 0, 30]} scale={10.08}>
              <mesh geometry={nodes.KabzaSusPart2_KabzaSusPart2_0.geometry} material={materials.KabzaSusPart2} />
              <mesh geometry={nodes.KabzaSusPart2_MetalKilic_0.geometry} material={materials.MetalKilic} />
              <mesh geometry={nodes.KabzaSusPart2_KabzaSusPart5_0.geometry} material={materials.KabzaSusPart5} />
              <mesh geometry={nodes.KabzaSusPart2_KabzaSusPart4_0.geometry} material={materials.KabzaSusPart4} />
              <mesh geometry={nodes.KabzaSusPart2_KabzaSusPart3_0.geometry} material={materials.KabzaSusPart3} />
              <mesh geometry={nodes.KabzaSusPart2_KabzaSusPart1_0.geometry} material={materials.KabzaSusPart1} />
              <mesh geometry={nodes.KabzaSusPart2_Kabza_0.geometry} material={materials.Kabza} />
              <mesh geometry={nodes.KabzaSusPart2_EmiKilic_0.geometry} material={materials.EmiKilic} />
            </group>
          </group>
        </group>
      </group>
    )
  }

group안의 position과 rotate의 수치를 조정해가면 처음 놓았던 위치를 변경 할 수 있다.