'Three JS FBX Loader: model not visible in the scene No errors in the console

I am tying to render the .fbx format 3D model using THREEJS FBXLoader but the model is not visible in the scene although it is added. The variable named 'model' in which the 3D FBX model is stored is defined as I console.log it. There are no errors in the console.

Any help regarding this will be very helpful

Console Log Image
Console Log Image I console.logged the 3d model object returned from the FBXLoader, it was visible

Scene Image
Scene Image In the scene, ground mesh and grid is visible but the model is not visible

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

var container, controls;

container = document.getElementById('container');

var width = container.clientWidth;

var height = container.clientHeight;

var camera, scene, renderer, light;

var mixers = [];

init();
animate();

function init() {

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

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

 scene = new THREE.Scene();

 var ambient = new THREE.AmbientLight(0x404040); //0x101030
 scene.add(ambient);
 scene.background = new THREE.Color( 0x1c0c4e );

 var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 grid.material.opacity = 1;
 grid.material.transparent = true;
 scene.add( grid );

 var loader = new THREE.FBXLoader();
 console.log(loader);
 loader.load( 'uploaded/silly_dancing.fbx', function ( object ) {
  model = object;
  console.log(model);
  scene.add( model );
 });        


 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 );

}

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();
}

function render() {

 renderer.render( scene, camera );           
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source