在使用gltfjsx后，试图使.glb模型旋转时出现问题

Question

我在Github上使用了gltf到jsx转换器(https://github.com/pmndrs/gltfjsx)创建我的模型的JSX组件。然而，我很难理解如何调整我的model.js，使模型自动在其轴上旋转。有人能帮我吗？

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')

Answer 1

只需从'@react three/fiber'导入useFrame挂钩，并相应地设置x轴调整。在你的情况下，它看起来是这样的：

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')