1

I've loaded a glTF model using the three.js glTF Loader. Although the object is centered on the origin (0, 0, 0), it appears to rotate along the curve of a circle on the x-plane.

This is an image of the model before it begins rotating. Notice that it is on the origin. Here is a GIF on how it rotates after adding mesh.rotation.y += 0.01; to the code.

enter image description here

A visual representation of what I get versus what I'm looking for:

enter image description here

I managed to center the object using this solution, but it doesn't seem to fix the rotation. Bounding box:

    var loader = new THREE.GLTFLoader();
    loader.load( 'model/empire_vase/scene.gltf', function ( gltf ) {

        mesh = gltf.scene;
        gltf.scene.traverse( function ( child ) {

        } );

        var box = new THREE.Box3().setFromObject( mesh );
        box.center( mesh.position ); 
        mesh.position.multiplyScalar( - 1 );

        var pivot = new THREE.Group();
        scene.add( pivot );
        pivot.add( mesh );

        var axesHelper = new THREE.AxesHelper( 100 );
        scene.add( axesHelper );

    } );

Rotation:

function animate() {

    if (mesh) {
        mesh.rotation.y += 0.01;
    }

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

The model was pulled from Sketchfab/Geoffrey Marchal but I noticed this issue with other Sketchfab models. Thanks in advance!

Miguel
  • 101
  • 2
  • 7
  • Try `pivot.rotation.y += 0.01;` – WestLangley May 26 '19 at 18:17
  • @WestLangley tried that and variations of it with no luck. – Miguel May 27 '19 at 17:47
  • You should rotate the pivot in the animation loop, not the mesh. It should work. You can also try the second solution - center the geometry. If it does not work, then the model could be problematic. You can visualize the bounding box of the model using `BoxHelper` and see if the bounding box is okay. – Rasheduzzaman Sourov May 28 '19 at 08:49

0 Answers0