FBXLoader problems: .fbx doesn't always load and it doesn't load materials


Here’s the code in my React app:

import React from 'react';
import * as THREE from 'three'; // 0.103.0
import FBXLoader from 'three-fbxloader-offical'; //1.0.0
// import FBXLoader from 'three-fbx-loader'; //1.0.3

loadFBX = source => {
    const onLoad = function(object) {
      object.name = 'ad';
      object.position.set(0, 0, 0);

      if (object.animations[0]) {
        this.mixer = new THREE.AnimationMixer(object);
        const action = this.mixer.clipAction(object.animations[0]);


    const onLoading = xhr => {
      console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);

    const onLoaderError = error => {

    const loader = new FBXLoader();
    loader.load(source, onLoad, onLoading, onLoaderError);

Sometimes the files don’t load and it throws this error:


with this file: Lowpoly_tree_sample.fbx (91.0 KB)

And with others it loads, but it looks all black:

With this file: dragon.fbx (2.6 MB)

Same with another file:

File: 87194c3334d8d227.fbx (204.4 KB)

What I’m I doing wrong :confused:?


import FBXLoader from 'three-fbxloader-offical'; //1.0.0
// import FBXLoader from 'three-fbx-loader'; //1.0.3

Unfortunately these are very out of date and not maintained by us - it’s just random people on NPM who have created these packages. I’ve reached out to them asking them to make it clear that they’re out of date, but had no response.

You’ll need to get the loader from the three.js repo here:

It’s not a module, but it’s pretty easy to convert it to one and there’s lots of info here on the forum on how to do that if you search.

1 Like