FBX Model is not visible in the scene

fbx-loader

#1

Even though the FBX Model is loaded (which can be verified from the browser console) but the fbx model is not visible on the scene.
Console Screenshot.


Below is the code snippet.

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var objFile = '<?php userdata($_GET['id'],$mysqli); ?>';
console.log(objFile);
var container, controls;
      // var stats; 
container = document.getElementById('container');
var width = container.clientWidth;
var height = container.clientHeight;
var camera, scene, renderer, light;
var model;
var clock = new THREE.Clock();

var mixers = [];

init();
animate();

function init() {

  // container = document.createElement( 'div' );
  // document.body.appendChild( container );

  camera = new THREE.PerspectiveCamera( 45, width / height, 0.001, 100000000 );
  camera.position.set( 10, 10, 10 );
  camera.up.set(0,1,0);

  controls = new THREE.OrbitControls( camera );
  // controls.target.set( 0, 100, 0 );
  controls.update();

  scene = new THREE.Scene();
  // scene.background = new THREE.Color( 0xa0a0a0 );
  // scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
  var ambient = new THREE.AmbientLight( 0x404040 );
  // 0x101030
	scene.add( ambient );
  var axisHelper = new THREE.AxisHelper(100);
  scene.add(axisHelper);

  scene.background = new THREE.Color( 0x1c0c4e );

  // light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
  // light.position.set( 0, 200, 0 );
  // scene.add( light );
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);
  var directionalLight1 = new THREE.DirectionalLight(0xffffff);
  directionalLight1.position.set(-1, -1, -1).normalize();
  scene.add(directionalLight1);

  // light = new THREE.DirectionalLight( 0xffffff );
  // light.position.set( 0, 200, 100 );
  // light.castShadow = true;
  // light.shadow.camera.top = 180;
  // light.shadow.camera.bottom = -100;
  // light.shadow.camera.left = -120;
  // light.shadow.camera.right = 120;
  // scene.add( light );

  // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

  // ground
  // var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
  // mesh.rotation.x = - Math.PI / 2; 
  // mesh.receiveShadow = true;
  // scene.add( mesh );

  // var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
  // grid.material.opacity = 1;
  // grid.material.transparent = true;
  // scene.add( grid );
  
  var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {

        console.log( item, loaded, total );

    };

    var texture = new THREE.Texture();
    

    var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
        }
    };

    var onError = function ( xhr ) {
    };
  // model
  var loader = new THREE.FBXLoader(manager);
  console.log(loader);
  
  // loader.load( 'uploaded/silly_dancing.fbx', function ( object ) {
    loader.load( objFile, function ( object ) {
      if(object.animations.length == 0){
        model = object;
        console.log(model);
        scene.add( model );
        model.position.set(0,0,0);
      } 
      else{
        object.mixer = new THREE.AnimationMixer( object );
        mixers.push( object.mixer );

        var action = object.mixer.clipAction( object.animations[ 0 ] );
        action.play();
        scene.add( object );
      }
    
      

    }, onProgress, onError);        

  // loader.load(objFile, function ( object ) {
  //   console.log(object);

  // //   object.mixer = new THREE.AnimationMixer( object );
  // //   mixers.push( object.mixer );

  // //   var action = object.mixer.clipAction( object.animations[ 0 ] );
  // //   action.play();

  // //   object.traverse( function ( child ) {

  // //     if ( child.isMesh ) {

  // //       child.castShadow = true;
  // //       child.receiveShadow = true;

  // //     }

  // //   } );
  //   object.position.x = 100;
  //   object.position.y = 100;
  //   object.position.z = 100;


  //   scene.add( object );

  // } );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( width, height);
  renderer.shadowMap.enabled = true;
  container.appendChild( renderer.domElement );

  window.addEventListener( 'resize', onWindowResize, false );

  // stats
  // stats = new Stats();
  // container.appendChild( stats.dom );

}

function onWindowResize() {
          var width = container.clientWidth;
          var height = container.clientHeight;
          camera.aspect = width / height;
          camera.updateProjectionMatrix();

          renderer.setSize( width, height );
      }

//

function animate() {

  requestAnimationFrame( animate );
  render()
  controls.update();

  // stats.update();

}
function render() {

  if ( mixers.length > 0 ) {
    for ( var i = 0; i < mixers.length; i ++ ) {
      mixers[ i ].update( clock.getDelta() );
    }
  }

  renderer.render( scene, camera );           
}

#2

It appears that your onError function is empty, and does nothing when there is an error. You will need to at least print the error to find out what might be going wrong.

onError = function (e) {
  console.error(e);
};

#3

ok thanks for the response


#4

thanks for the response
Below is the console.
Error: THREE.FBXLoader: Unknown property type at BinaryParser.parseProperty (FBXLoader.js:3385) at BinaryParser.parseNode (FBXLoader.js:3138) at BinaryParser.parse (FBXLoader.js:3084) at THREE.FBXLoader.parse (FBXLoader.js:72) at Object.onLoad (FBXLoader.js:47) at XMLHttpRequest.<anonymous> (three.js:30754)

Does the loader does not support this type of fbx model format? I have rendered many fbx model through this fbx loader. The model is not corrupted as I have uploaded it on sketchfab and it’s rendering fine there.
Can you please help me with this?


#5

Please share the entire console output - if your FBX file is too old we may not support it.

Also, can you share the FBX file?


#6

Here is the console output and the MODEL FIle.
247_House 15_fbx.FBX (985.1 KB)

uploaded/247_House 15_fbx.FBX
three.js:44360 THREE.AxisHelper has been renamed to THREE.AxesHelper.
AxisHelper @ three.js:44360
3df.php?id=160:344 THREE.FBXLoader
three.js:21172 THREE.WebGLRenderer 92
3df.php?id=160:335 6% downloaded 
3df.php?id=160:335 13% downloaded
3df.php?id=160:335 100% downloaded
FBXLoader.js:3078 THREE.FBXLoader: FBX binary version: 6100
3df.php?id=160:325 uploaded/247_House 15_fbx.FBX 1 1
3df.php?id=160:340 Error: THREE.FBXLoader: Unknown property type 
at BinaryParser.parseProperty (FBXLoader.js:3385)
at BinaryParser.parseNode (FBXLoader.js:3138)
at BinaryParser.parse (FBXLoader.js:3084)
at THREE.FBXLoader.parse (FBXLoader.js:72)
at Object.onLoad (FBXLoader.js:47)
at XMLHttpRequest.<anonymous> (three.js:30754)

#7

And thank you all very much


#8

This is an old version of the format, which we don’t support. Can you re-export the file with a newer FBX version?


#9

sorry no, I downloaded this from turbosqid


#10

Turbosquid often has multiple formats for each model, if there is another format available for your model perhaps you will have more luck with it.

Otherwise you will have to find a way to update the file or convert it to another format. You could try FBX2glTF.


#11

ok thank you