FBX Animation

[bolti95]

Hello!

I have been attempting to import an FBX model following this tutorial on mixamo / blender. https://codeworkshop.dev/blog/2021-01-20-react-three-fiber-character-animation/

When I import my glb file into the gltfjsx package (https://www.npmjs.com/package/@react-three/gltfjsx), it seems like the upload doesn't work. My glb file is using the exact same export settings as in the video, but I am not sure if my FBX is set up correctly to be imported this way. I am able to successfully import my FBX animation and model using Three.js, using the THREE.FBXLoader and THREE.AnimationMixer.....

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

export default function Model(props) {
const group = useRef()
const { nodes, materials, animations } = useGLTF('/tauntTESTtwo.glb')
const { actions } = useAnimations(animations, group)
useEffect(() => {
console.log(actions);
actions.taunt.play();
});
return (
<group ref={group} {...props} dispose={null}>
<group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>










)
}
useGLTF.preload('/tauntTESTtwo.glb')

I import my animated character into the scene using Suspense

[drcmda]

gltf has a different workflow than fbx. you can do useLoader(FBXLoader, url) but the output is not the same as for gltfloader. i think it just returns the scene. useLoader in general is just using plain three.loaders, all it does is that it wraps it into suspense but otherwise it is the same thing.

[bolti95]

So does it return the scene but no model? I tried this but it doesn't work.

export default function ReactModel(props) {
let fbx = useLoader(FBXLoader, props.url)
// wrap fbx in primitive.
return
}

I also found this answer on stack https://stackoverflow.com/questions/63936267/how-to-extract-and-play-animation-in-react-three-fiber , could this work but with FBXLoader instead of GLTFLoader?

Thanks for your help :)

[njm222]

@bolti95 Here is the convenience hook useFbx() from drei https://github.com/pmndrs/drei#usefbx

[drcmda]

I still don't understand the problem tbh. You load fbx in the same exact way as in three. R3f does not go in between, it doesn't have its own loaders, you're just using three. You can also use plain fbxloader inside a use effect. You need to know what it returns, if it's a scene or group then you can put this into a primitive and it will render. If you don't see anything then your path is wrong or the model is too big/small and the camera needs adjustments. If you have a working example I would just copy the settings.

Without a sandbox it's hard to really help out.

[bolti95]

Hello,

so my issue appears to be with the model I am exporting as it needs scaling.. like you mentioned the model is too big so I couldn't see it in my camera. For anyone else having issues, I found this resource really helpful https://github.com/funwithtriangles/blender-to-threejs-export-guide - a guide to exporting 3D models from Blender to glTF and this glTF viewer for viewing the model online before updating any code https://gltf-viewer.donmccurdy.com/

Thanks for your help :)