Unable to load FBX Binary Parse file in FBX Loader.
I am using latest Dev Version of three js in angular 5.
Can anyone share the code for loading FBX Binary Parse file…?
Previous discussion is here: https://github.com/mrdoob/three.js/issues/13166
@Dharvesh_Mydeen_K please share the code you are currently using and the errors you are getting now that you have updated to the dev version.
Yes,I cant get clear view in that that’s why asking in forum…
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var mixers = [];
init();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
scene = new THREE.Scene();
// grid
var gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
gridHelper.position.set( 0, - 0.04, 0 );
scene.add( gridHelper );
// stats
stats = new Stats();
container.appendChild( stats.dom );
// model
var manager = new THREE.LoadingManager();
manager.onProgress = function( item, loaded, total ) {
console.log( item, loaded, total );
};
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 ) {
console.error( xhr );
};
var loader = new THREE.FBXLoader( manager );
loader.load( './assets/al.fbx', 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 );
}, onProgress, onError );
loader.load( './assets/nurbs.fbx', function( object ) {
scene.add( object );
}, onProgress, onError );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// controls, camera
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 12, 0 );
camera.position.set( 2, 18, 28 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
if ( mixers.length > 0 ) {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() );
}
}
stats.update();
render();
}
function render() {
renderer.render( scene, camera );
}Thanks for the code. Is the problem that you can’t see the loaded model?
Yes I cant see my updated model .
Ok, so we know from the GitHub conversation that the model does load. So probably the problem is that the camera is not positioned correctly. It might even be inside the object.
Have you tried moving and rotating the camera? Or perhaps scaling the loaded object down / up is necessary.
I am a beginer for this three js and also 3D modeling.
So i just copied fbx example from three js and worked on that.
In this example I just replaced my model so it is not working and any other Fbx Binary parse model not loading here.ASCII plain text model only loading in this example,
I want to know that just how to load a Binray model in a simple scene with camera angle.
Can you paste here all messages that you get in the browser console?
THREE.WebGLRenderer 90dev
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
THREE.FBXLoader: FBX binary version: 7400
./assets/al.fbx 1 1
I have pasted all messages .It is not showing any error messages.But my model is not showing or not uploading i think so.
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set(0.5, 1.0, 0.5 ).normalize();
scene.add( light );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.y = 5;
camera.position.z = 10;
scene.add( camera );
var refId = 68;
var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
scene.add( grid );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var manager = new THREE.LoadingManager();
manager.onProgress = function( item, loaded, total ) {
console.log( item, loaded, total );
};
var loader = new THREE.FBXLoader( manager );
loader.load( ‘./assets/al.fbx’, function( object ) {
scene.add( object );
render();
});
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
this is my edited code.
Ok great, looks like the model is loading currently! 
You just need to position the camera correctly. Try moving it back / forwards and increase the camera.far a bit:
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );This is the bounding box of your model:
Bounding box - L: 400.3 W: 480.2 H: 46.00
Since your camera.z = 10, this means it’s currently inside the model.
Thsnk you.
I have changed camera position but my model is not showing to me.
