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