Issue trying to make a .glb model spin after using gltfjsx

user_18681226 0
Viewed 87

I've used a gltf to jsx converter on Github (https://github.com/pmndrs/gltfjsx) to create JSX components of my model. However, I'm struggling to understand how to adjust my model.js so that the model automatically spins on its axis. Could anyone help me with this?

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'


export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/model.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <group position={[-0.0, -0.3, -1]} rotation={[-Math.PI / 2, 0, 2.7]} scale={0.58}>
        <mesh geometry={nodes.boot_0.geometry} material={nodes.boot_0.material} />
        <mesh geometry={nodes.boot001_0.geometry} material={nodes.boot001_0.material} />
        <mesh geometry={nodes.boot002_0.geometry} material={nodes.boot002_0.material} />
        <mesh geometry={nodes.boot003_0.geometry} 
        </group>
      </group>
      <group position={[-0.02, -0.01, 0.06]} rotation={[-Math.PI / 2, 0, 0]} scale={0.58}/>
    </group>
  )
}

useGLTF.preload('/model.glb')

jsx three.js reactjs javascript
1 Answers

Simply import the useFrame hook from '@react-three/fiber', and set the x-axis adjustment accordingly. In your case, it would look like this:

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'  // Import the useFrame hook

export default function Model({ ...props }) {

  const group = useRef()
  const { nodes, materials } = useGLTF('/model.glb')

  // We utilize the useFrame hook here to rotate on the x-axis.
  useFrame(() => {
    group.current.rotation.x += .02;
  })

  return (
    <group ref={group} {...props} dispose={null}>
      <group position={[-0.0, -0.3, -1]} rotation={[-Math.PI / 2, 0, 2.7]} scale={0.58}>
        <mesh geometry={nodes.boot_0.geometry} material={nodes.boot_0.material} />
        <mesh geometry={nodes.boot001_0.geometry} material={nodes.boot001_0.material} />
        <mesh geometry={nodes.boot002_0.geometry} material={nodes.boot002_0.material} />
        <mesh geometry={nodes.boot003_0.geometry} 
        </group>
      </group>
      <group position={[-0.02, -0.01, 0.06]} rotation={[-Math.PI / 2, 0, 0]} scale={0.58}/>
    </group>
  )
}

useGLTF.preload('/model.glb')
user_90408660
Related