pmndrs / gltfjsx

🎮 Turns GLTFs into JSX components
https://gltf.pmnd.rs
MIT License
4.8k stars 317 forks source link

default generated tsx code problems #273

Open patacoding opened 2 months ago

patacoding commented 2 months ago

const group = React.useRef() const { scene, animations } = useGLTF('/autonomous_robot_sweeper-transformed.glb') const clone = React.useMemo(() => SkeletonUtils.clone(scene), [scene]) const { nodes, materials } = useGraph(clone) as GLTFResult

// actions is empty const { actions } = useAnimations(animations, group)

// this way get correct result const actions = useAnimations(animations, group)

maybe useAnimations version problem? tested with "@react-three/drei": "^9.106.0",

patacoding commented 2 months ago

I need reuse loaded gltf model and play animations of each of them at same time, default generated detail jsx component will cause warning like THREE.PropertyBinding: No target node found for track: somebone.position and stop animation

use following code solve my problems

const group = useRef(null)

const { scene, animations } = useGLTF('url')

const clone = useMemo(() => SkeletonUtils.clone(scene), [scene])

const { nodes, materials } = useGraph(clone) as GLTFResult

const mixer = new THREE.AnimationMixer(clone)

const actions = useAnimations(animations, group)

// console.log('actions:', actions)

const playClipName = 'Track'

for (let index = 0; index < actions.clips.length; index++) { const clipName = actions.clips[index].name const clip = actions.clips[index] if (clipName === playClipName) { mixer.clipAction(clip).play() } }

useFrame((_state, delta) => { mixer.update(delta) })

return (

)