Search code examples
three.jsblenderquaternionsgltf

GLTF model deformed upon being rotated in three.js


I've been trying to import a gltf model from blender into three js, but I'm having trouble rotating it as whenever I try to set its quaternion to anything but (0,0,0,1), the model is deformed. I've included screenshots of how the model looks with the (0,0,0,1) quaternion and then what it looks like when I change the quaternion to (0,1,0,1).

Here's my code for importing the model



loader.load('./resources/Machina_Colored.gltf',

  function(gltf){

    //pos and quat are a THREE.Vector3 and THREE.Quaternion respectively

    const mMass = 0;
    const size = new THREE.Vector3(4,8,4); //this is the size of the model in blender

    const mShape = new Ammo.btBoxShape(new Ammo.btVector3(size.x * 0.5, size.y * 0.5, size.z * 0.5));
    mShape.setMargin(0.05); 

    const mObj = gltf.scene.children[0]; 

    createRigidBody(mObj,mShape,mMass,pos,quat); //this seems to work with any quaternion it's just the model itself that is having problems

  },

  function(xhr){
    console.log(((xhr.loaded/xhr.total) * 100) + "% loaded");
  },

  function(error){
    console.log('An error occured');
  });

Here is the model (working normally) with the (0,0,0,1) Quaternion

Here is the model (working normally) with the (0,0,0,1)

And then here's what happens when I use the (0,1,0,1) Quaternion

And then here's what happens when I use the (0,1,0,1) Quaternion

I've also included a screenshot of what my file looks like in blender just in case

enter image description here


Solution

  • Thanks to WestLangley's comment I added these lines of code to the top of my program

    const eul = new THREE.Euler(0,0,0); //this now controls the rotation of the model
    
    quat.setFromEuler(eul);
    
    

    and the rotation is reflected without deformation