FBX model doesn't get loaded (REACT app)

Questions
,
1

Hi, I am fairly new to three.js and I am trying to load a 3D model but had no luck so far. Just seeing a black screen.

import React, { Component } from "react";
import * as THREE from "three";
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

class Game extends Component {
    componentDidMount() {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        this.mount.appendChild(renderer.domElement);

        camera.position.z = 5;

        const loader = new FBXLoader();

        loader.load('assets/aj.fbx', (fbx) => {
            fbx.scale.setScalar(0.1);
            fbx.traverse(c => {
                c.castShadow = true;
            });
            console.log("Adding FBX resource to the scene.");
            scene.add(fbx);
        })
        renderer.render(scene, camera);
    }
    render() {
        return <div ref={ref => (this.mount = ref)} />;
    }
}
export default Game;

Confirmed there was no error message on Chrome developer tool. (“Adding FBX resource to the scene.” printed.)

Confirmed FBX file I got from Mixamo is okay. (Loaded okay with view application. Creators 3D)

What am I missing? Help me please.

2

assets/aj.fbx is not a valid path in any bundler. either put it into /public and then use /assets/aj.fb or import ajUrl from './assets/aj.fbx' the file which will give you a hashed url. just using some arbitrary string isn’t going to tell the bundler to pick up that file, it’ll simply be missing. otherwise, threejs will become much simpler if you use it in react: gltf simple example (forked) - CodeSandbox all of the boilerplate goes away, it’s fully integrated and it’s still just plain threejs as opposed to a wrapper since it’s a renderer just like react-dom.

1 Like