'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
I console.logged the 3d model object returned from the FBXLoader, it was visible
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 |
---|