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
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
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