Moving loaded FBX models in space. How to do this?



After load of the FBX object we see model loaded with animation running.

We can’t change object’s position. I mean after :+1:
object.position.x = -5000;

Object is still in the center.
Is there anything we can do to move loaded animated FBX object in the space ?
Or is there another way to do this ?

Object is attached to the animation mixer…


Does it help if you place the following line after altering the position property?


To provide more help, it would be best to share your code as a live example.


Code below is just extended version from Three JS FBX loader. Added object.updateMatrix(); as you’ve recommended Michael, but I can’t see any change in the object position.

We use latest dev version of the Three JS.


container = document.getElementById(divName);

camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 112, 260);

controls = new THREE.OrbitControls(camera);, 112, 0);

var limit = Math.PI * 0.125;

controls.enableZoom = false;

controls.minPolarAngle = Math.PI * 0.4;
controls.maxPolarAngle = Math.PI * 0.6;

controls.minAzimuthAngle = -limit;
controls.maxAzimuthAngle = limit;


scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);

light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 200, 0);

light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 200, 100);
light.castShadow = true; = 180; = -100; = -120; = 120;

var modelPath = '../models3d/Sheila/Talk2.fbx';

// model
var loader = new THREE.FBXLoader();
loader.load(modelPath, function (object) {

    var baseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 });

    object.mixer = new THREE.AnimationMixer(object);

    var action = object.mixer.clipAction(object.animations[0]);;

    object.traverse(function (child) {

        if (child.isMesh) {

            if (child.material != null) {

                var mat = child.material;

                if (mat.transparent) {
                    mat.transparent = false;

                mat.side = THREE.DoubleSide;

            child.castShadow = true;
            child.receiveShadow = true;



    //object.position = new THREE.Vector3(500, 0, 0);
    object.position.y = 3000;


renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.offsetWidth, container.offsetWidth * 0.56);
renderer.shadowMap.enabled = true;

Object is still at it’s original position.

I’m guessing position might be overrided by the object’s animation position ?



What happens if you do not playback the animation? So I mean if you remove the AnimationMixer related code from your example?


Does this happen for you with other FBX models? I’ve tested this with a couple of models and I can’t reproduce your problem, they all get translated just fine with or without the animations applied.


That’s correct sir, it seems other models from Mixamo work fine.

Problem is only regarding this particular model exported from DAZ to Mixamo and then exported from Mixamo to Three JS, maybe there’s still something related with Euler’s orders regarding positioning (just guess) ?

Best Regards,


One of the animations overwrites the position of this model — You’ll need to either stop the animation, or wrap the model in another THREE.Group and move that group around.


Thanks Don. I think we will try to wrap this object somehow. This should solve this problem.