fbx and obj loaders

[emileswain]

Looking for guidence on how to approach loading fbx/obj files. Dreis gltf loader works fine, but i can't find anything about using three's obj or fbx loader.

Not entirely sure how to go about leveraging threejs's existing loaders.

[gsimone]

You can follow this example from the recipes:

https://github.com/react-spring/react-three-fiber/blob/master/api.md#useloader-experimental

But of course using your desired loader.

If you want to contribute, it would be cool having some more ready to use loaders for drei ( useObjLoader, useFbxLoader )

[emileswain]

I'll pushed a pull request. I'll try and address any feedback you may have when I have time.
pmndrs/drei#131

[emileswain]

Ah, thanks. I didn't want to starting implementing my own code if it already existed. I'll take a look at that.

As an asside, i found this to convert my fbx to gltf. https://github.com/facebookincubator/FBX2glTF

[dowrow]

Thank you!
EDIT: Didn't really work

[drcmda]

Not entirely sure how to go about leveraging threejs's existing loaders.

really there's nothing in here that would cause any difference, you can use anything in three as you always did. you just pack it into reacts designated peripherals: state, effects, memo

const [scene, set] = useState()
useEffect(() => void new FBXLoader().load(url, set), [url])
return model ? <primitive object={scene} /> : null

useLoader is just a convenience hook that wraps the above into suspense

const scene = useLoader(FBXLoader, url)
return <primitive object={scene} />

pseudo code, i dont know if fbxloader returns a scene from memory but you get the point

[emileswain]

Seemingly, i'm at that age when everything starts to get a little slower. The below worked. I was just having a brain freeze about importing the FBXLoader bit.

Now i'm just having issues with my export from blender borking up.

Thanks for the tit bits.

E

import React, { useRef, useState } from "react";
import { useFrame, useLoader  } from 'react-three-fiber'
import {useGLTFLoader} from "drei";
import {FBXLoader} from "three/examples/jsm/loaders/FBXLoader";

function Asset({ url }) {
    const fbx = useLoader(FBXLoader, url)
    return <primitive object={fbx} dispose={null} />
}

const ARoom = (props)=>{
    return (
        <group dispose={null}>
            <Asset url={"models/fbx/ARoom.fbx"}></Asset>
        </group>
    );
}

export default ARoom;

[hambone01]

@emileswain
I've been banging my head all day trying to get an fbx animation working with r-t-fiber. Is there any chance you have your working code someplace? I'd love to take a look.

[drcmda]

you'd do it the same way you do it in plain three, there's no difference as you're working with the same THREE objects. useLoader just integrates the loading part into react suspense. if you know how to animate an fbx normally, then take that same code, stick it into a useEffect and it will animate. other than that, i don't know fbx - never used it, don't know if it even stores animations. i always use gltf.