GLTF 模型在three.js 中旋转时变形

Posted 2023-03-23

【中文标题】GLTF 模型在three.js 中旋转时变形

【英文标题】：GLTF model deformed upon being rotated in three.js

【发布时间】：2021-10-12 14:21:19

【问题描述】：

我一直在尝试将 gltf 模型从搅拌机导入三个 js，但我无法旋转它，因为每当我尝试将其四元数设置为 (0,0,0,1) 以外的任何值时，模型变形了。我已经包含了模型在 (0,0,0,1) 四元数下的外观以及当我将四元数更改为 (0,1,0,1) 时的外观的屏幕截图。

这是我导入模型的代码

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');
  );

这是带有 (0,0,0,1) 四元数的模型（正常工作）

然后这是我使用 (0,1,0,1) 四元数时发生的情况

我还附上了我的文件在搅拌机中的截图，以防万一

【问题讨论】：

提示：表示纯旋转的四元数具有单位长度。一个 three.js 四元数总是假定有单位长度。

我明白了！您是否建议我修改轮换？

您可以选择设置。这取决于你。

【参考方案1】：

感谢 WestLangley 的评论，我将这些代码行添加到我的程序顶部

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

quat.setFromEuler(eul);

并且旋转反射不变形