Three.js - GLTF model position doesn't start from origin

Question

When I try to load a glTF model with a 0,0,0 position, it's far off from the origin.

When I try to rotate the glTF model, it spins around (marked by blue dots) the origin rather than spinning from it's center.

I think this is some sort of pivot issue?

How do I fix this?

var tree;
function loadGLTFCharacter(path, position){
    // Load a glTF resource
    loader.load(
        // resource URL
        path,
        // called when the resource is loaded
        function ( gltf ) {
            gltf.scene.traverse( function( node ) {

                if ( node.isMesh ) {
                    node.castShadow = true;
                    node.receiveShadow = true;
                }

            } );
            gltf.scene.position.set(position.x, position.y, position.z);
            tree = gltf.scene;
            scene.add( tree );
            
            gltf.animations; // Array<THREE.AnimationClip>
            gltf.scene; // THREE.Group
            gltf.scenes; // Array<THREE.Group>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset; // Object

        },
        // called while loading is progressing
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

            console.log( 'An error happened' );

        }
    );
}

loadGLTFCharacter('models/characters/tree_detailed.gltf', {x:0,y:0.2,z:0});

Answer 1

I opened the .gltf file in a text editor, turns out there is a part:

"nodes": [
{
  "mesh": 0,
  "scale": [
    0.25,
    0.25,
    0.25
  ],
  "translation": [
    6.49107456,
    1.60296546E-31,
    -1.89133477
  ],
  "name": "tree_detailed"
}
],

I replaced the numbers in the translation section to 0, 0, 0 and it works fine now.

Why would anyone create an object with random translations is beyond me

Answer 2

Things like these random translations can happen when exporting from one CAD application to another one. I had such a case when I exported an architectural design from Fusion 360 to Cinema 4d and from there to Blender in order to export it as a gltf file.

The model had another scale factor due to unit mismatch, and I scaled it down in order to get the desired size again. Then, parts of the model appeared at the wrong locations, so I had to translate them to the desired point. While this might look alright in the CAD app, these scales and rotations will be saved in the gltf file and possibly handled differently by three.js, resulting in the error you have had.

Ways to avoid this are:

1. Avoid using several different apps and file formats in your asset production pipeline if possible.
2. If not 1), then take care of export and import settings, esp. scale factors and units. Check your imported models for their size, for example by comparison with Blender's standard cube.
3. Try to keep a consistent unit workflow. When exporting to three.js, keep in mind that one unit in three.js equals one meter (SI system) and use the same unit and scale factor from the beginning of the design.
4. When working with 3rd party assets: First of all, check their units, scale factor, positioning and (not related but also important) up-axis.