Problem With Fbxmodel Position

Hello Guys,

Here is my code for fbx loader,

	<script src="js/jquery.js"></script>
	<script src="js/three.js"></script>
	<script src="js/libs/inflate.min.js" type="text/javascript"></script>
	<script src="js/FBXLoader.js"></script>
	<script src="js/orbitcontrols.js"></script>

< script >
var scene, camera, renderer,mesh, light,container,geometry,controls;
var mixers=[];
var clock = new THREE.Clock();
function init()
	container = document.createElement( 'div' );
	document.body.appendChild( container );

	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//	scene.position.set(20,10,0);
    camera.up = new THREE.Vector3(0,0,1);
    camera.lookAt(new THREE.Vector3(50,0,0));
	var gridHelper = new THREE.GridHelper( 200, 50);
	scene.add( gridHelper );	
var manager = new THREE.LoadingManager();
  manager.onProgress = function( item, loaded, total ) {
    console.log( item, loaded, total );

	var loader = new THREE.FBXLoader( manager );
	loader.load( 'model/DigestiveAnimation.fbx', function( object ) {
	}, onProgress, onError );

	renderer = new THREE.WebGLRenderer();
	if ( !renderer.extensions.get( 'WEBGL_depth_texture' ) )  { console.log("Your browser does not support WEBGL_depth_texture, Try Different Browser !!");   }
	renderer.setPixelRatio( window.devicePixelRatio );
  	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement ); 0, 12, 0 );
  light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
  light.position.set(0, 1, 0);
  light = new THREE.DirectionalLight(0xffffff, 1.0);
  light.position.set(0, 1, 0);


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

function animate() {
  requestAnimationFrame( animate );
/*  if ( mixers.length > 0 ) {
    for ( var i = 0; i < mixers.length; i ++ ) {
      mixers[ i ].update( clock.getDelta() );

function render() {
  renderer.render( scene, camera );

< /script >

Issue is whenever I am create cube or circle it is set center in screen.
but my fbx model is not set center is screen.

I have added gridhelper to identify issue and set correct position but i found that
my model is in air when loaded in scene. means there is vertical distance between object and grid helper. I have try to set it in center positioning.

but such i have to set every time position for each model. that is not feasible, I want to make function which set object in center. no matter which object is called.


Should we create .fbx file ourselves? Could you add, at least, some explanatory pictures?

As @prisoner849 mentioned, sharing the FBX makes it easier to help you. A live demo would be even better :wink:

Independently, you should ensure that the geometry of your model is actually centered and not translated. You can check this in a 3D modeling tool like Blender. You can also try my suggestion in: Coordinates in ctm / slt

Sorry Guys,

Here is the Fiddle url:


Your experiments with positions and rotations of the camera and the scene are hell of the chaos.
Anyway, somehow I dug through it :smile:

You can use THREE.Box3() and its method to put your model in the center of the scene.

The red box shows the the original position of your model.

  loader.load('', function(object) {

    var box3 = new THREE.Box3().setFromObject(object);

    scene.add(new THREE.Box3Helper(box3, 0xFF0000));

    var shift = box3.getCenter();


    scene.add(new THREE.Box3Helper(new THREE.Box3().setFromObject(object)));

  }, onProgress, onError);

I understand my mistake.

Thank you very much for you help

Hello, I have used your guide and now able center my object.
but I am getting problem with animation

you can see it not animating i have set animation code. before it was working but now no animation.
I know I am doing some stupid that why its not working
my animation is working here well .
but merged with your guided code i am not able to figure out why it is not working…

Also I have problem with animation if you see in my demo its animating wrong geometry. means only intestine is animated but in my code dont know how whole stomach area also animated like beeping heart.

“After” doesn’t mean “because of”. Animation doesn’t work even if you comment the code with positioning of the model in the jsfiddle.

I know its not because of positioning,

I am trying figure out why its not working,
can you please took look ?