Three.js: FBXLoader wrong handle the transformed pivot points

[Rogardo]

Description of the problem

I have tried to load an FBX file with the FBXLoader. I also found the Issues #11895 that descripe a similar problem.

In the Fbx Sdk from Autodesk I solved this kind of Problem bei reset all pivots to the Mesh origin for the TRS-Matrix.

This is how I load the FBX-File. Is a little variation on the FBX-Example

function centerCam(aroundObject3D){

    //calc cam pos from Bounding Box
    var BB = new THREE.Box3().setFromObject(aroundObject3D);
    var centerpoint = BB.getCenter();
    var size = BB.getSize();
    var backup = (size.y / 2) / Math.sin( (camera.fov/2)*(Math.PI/180) );
    var camZpos = BB.max.z + backup + camera.near ;

    // Hilfsobject
    const redGeom = new THREE.BoxBufferGeometry( 10, 10, 10 );
    const redMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
    const redMesh = new THREE.Mesh( redGeom, redMat );
    redMesh.position.set(centerpoint);
    //scene.add( redMesh);

    //move cam
    camera.position.set(centerpoint.x - 1, centerpoint.y+1, -camZpos);
    camera.far = camera.near + 10*size.z;
    camera.updateProjectionMatrix();
    camera.lookAt(centerpoint);

}

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
    //camera.position.set(1, 2, -3);


    controls = new THREE.OrbitControls(camera);
    controls.target.set(0, 10, 0);
    controls.update();

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

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

    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 = 0.2;
    grid.material.transparent = true;
    scene.add(grid);

    // model
    var loader = new THREE.FBXLoader();
    // loader.load('models/WerkzeugPump.FBX', function (object) {
    // loader.load('models/Pumpe.FBX', function (object) {
    loader.load('models/Getriebe.FBX', function (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;

            }

        });

        scene.add(object);
        centerCam(object);

    });

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    container.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);

    // stats
    stats = new Stats();
    container.appendChild(stats.dom);

}

Three.js viewer

Windows Viewer

FBX-File on my OneDrive:
https://1drv.ms/f/s!AtdlOM2GmeG5hKc1e8m-5m5-0SPhSQ

Three.js version

• [ ] Dev
• [x] r90
• [ ] ...

Browser

• [ ] All of them
• [ ] Chrome
• [x] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[looeee]

Can you make sure that you are using the latest version of the loader? Transformed pivots should work now.

If that doesn't fix it then please share your model and I'll take a look.

[mrdoob]

I can confirm using the dev branch.

Models: https://1drv.ms/f/s!AtdlOM2GmeG5hKc1e8m-5m5-0SPhSQ

[looeee]

Oh sorry, I missed the model link. I'll take a look later today.

[Rogardo]

Hello,

I have save the file in ASCII and compare the definition to one I have "Reset the Pivots" in 3DS Max.

I have seen that the original (left) has a geometry scaling and the resettet (right) have the scaling translatet in the local scaling value.

Here is a screenshot how I do this kind of "reset" the Pivots in the Fbx sdk.
I do not know if this is the right way to do this, but for my test models it works.

I hope it helps you.

[mike-tuxedo]

I can confirm this problem in fbx-bin-versions (2006 - 2012) and fbx-ascii-format (2017).
I have a complex model with complex animations and when it animates, it seems that the pivot points are at the wrong place. When i convert it to gltf, nearly all is ok, only materials are lost. But since i need materials and have no influence in how the model is made, i can't use gltf.

Unfortunately I'm not allowed to share this model and I have nothing positive to contribute.
I tried to replace "GeometricScaling" with "Lcl Scaling" in my ASCII-file, but didn't work for me.

Just to let you know.

[looeee]

Fixed in #13513