FBX model not loading

Questions
1

Hello, I have a FBX file that I am trying to display in the scene but every time I display it I get an error message i generated saying “An Error Happened” but it says “100% loaded”. I’ve been researching and I believe the problem is that I have a “source & texture”(which contain like images and tif files) file but I am not sure where to put them because in the actual “fbx” file they have examples and 2 image files. When I was using “gltf” I kept those files in the directory with the gLTF file. I believe that is the issue but I am not here. Here is my code, image of my directory, and error message.

P.S: I was also thinking of converting FBX to GLTF but I am not sure if thats the right way to go about it.

File Directory - https://gyazo.com/8bc0e0d52072c9fa3e2f889392acd5c2
Error Message - https://gyazo.com/1c88f45fb957f5e2c8e2fe56ed7fd8f1
Code:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 1, 1, 150 );//the position of the object x,y,z

    var ambientLight = new THREE.AmbientLight( 0x404040  );//provides light to an object 
    scene.add( ambientLight );

    var directionalLight = new THREE.DirectionalLight( 0xffffff );//like the sun, light in specific direction
    directionalLight.position.set( 0, 1, 1 ).normalize();
    scene.add( directionalLight );              

    var loader = new THREE.FBXLoader();
    loader.load(
    // resource URL
    'models/fbx/stanford-bunny.fbx',
    // called when the resource is loaded

function ( object ) {
object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
var action = object.mixer.clipAction( object.animations[ 0 ] );
action.play();
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + ‘% loaded’ );
},
// called when loading has errors
function ( error ) {

    console.log( 'An error happened' );

}

);
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );
function animate(){

 requestAnimationFrame(animate);

 renderer.render(scene, camera);
     }

animate();

2

Cross-post of https://stackoverflow.com/questions/50440936/fbx-model-not-loading.

Rather than logging An error happened, log the error that is being passed into the function to debug the cause.

3

I Changed it and got this error “TypeError: Cannot read property ‘uuid’ of undefined” I researched and its with the “action” variable so i removed it and nothing is being displayed but its “100% loaded”

4

Could you post the model itself, and any textures? Others cannot reproduce the problem without that, and (very, very often) these questions involve something particular about the model.

5

I fixed the problem by removing the “action” varible and changing the file

6

Sounds like the problem is that your model doesn’t have animations, but the lines

object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
var action = object.mixer.clipAction( object.animations[ 0 ] );
action.play();

assume that it does. These lines were previously wrapped in an if statement:

if( object.animations[ 0 ] ) {

    object.mixer = new THREE.AnimationMixer( object );
    mixers.push( object.mixer );
    var action = object.mixer.clipAction( object.animations[ 0 ] );
    action.play();

}

When the example was updated a few months ago that was removed. I think that we should switch it back since it seems to be causing quite a bit of confusion for users using the example code. And for purely selfish reasons, when I’m testing lots of models it makes things easier!

1 Like