Three.js中使用四元数时如何调整FBX模型显示大小

嘿，我明白你遇到的麻烦了——设置好模型位置后一旋转，它就“缩水”了对吧？其实这不是模型真的变小了，而是你的旋转方式搞错了方向，导致模型的位置偏离了原本合适的视角位置。

问题根源 #

你现在用的yarnModal.position.applyQuaternion(quaternion)是直接对模型的世界位置向量进行旋转操作。举个例子，初始位置是(0,0,688)，这个向量绕原点旋转后，它的方向会改变，但长度（离原点的距离）不变。但相机的视角是固定的，旋转后模型可能跑到了相机视野的边缘，或者离相机的实际距离变远，看起来就像变小了。而且这么做根本不是实现“轨道旋转”（绕某个点转圈）的正确方式。

正确的解决方案 #

实现轨道旋转的核心思路是：让模型绕一个目标点（比如世界原点）做圆周运动，而不是直接旋转它的位置向量。这里有两种简单的实现方式：

方案1：用父容器实现（推荐，最直观）

创建一个空的THREE.Object3D作为旋转容器，把模型放在容器里，然后旋转这个容器——这样模型会跟着容器一起绕原点转圈，同时保持和容器原点的距离不变：

// 先创建一个空的旋转容器
const orbitContainer = new THREE.Object3D();
scene.add(orbitContainer);

fbxLoader.load('models/fbx/yarn_with_mtl.fbx', function (yarn) { 
  yarn.traverse(function(child) { 
    if (child instanceof THREE.Mesh) { 
      child.receiveShadow = true; 
      child.castShadow = true; 
    } 
  }); 
  yarn.name = "yarn"; 
  // 模型相对于容器的位置，保持离原点688单位
  yarn.position.set(0, 0, 688); 
  yarnModal = yarn; 
  // 把模型添加到旋转容器里
  orbitContainer.add(yarn); 
}); 

// 旋转容器，而不是直接操作模型的position
quaternion.setFromAxisAngle(axis, 0.005);
orbitContainer.quaternion.multiply(quaternion);

方案2：手动计算轨道位置（不用容器）

如果不想额外加容器，可以手动计算模型相对于目标点的偏移量，旋转偏移量后再重新设置位置：

if(yarnModal) {
  // 设定轨道旋转的目标点（这里用世界原点）
  const targetPoint = new THREE.Vector3(0, 0, 0);
  // 计算当前模型到目标点的偏移向量
  const positionOffset = yarnModal.position.clone().sub(targetPoint);
  // 对偏移向量应用旋转
  positionOffset.applyQuaternion(quaternion);
  // 重新设置模型位置：目标点 + 旋转后的偏移向量
  yarnModal.position.copy(targetPoint.add(positionOffset));
}

为什么这两种方法能解决问题？ #

不管用哪种方式，都是保持模型到目标点的距离不变，只改变它的环绕方向，这样模型始终处于离相机合适的距离上，视觉大小就不会变了。而你之前的做法是直接旋转模型的世界位置，相当于让模型绕原点“甩”出去，自然会偏离合适的视角位置。

内容的提问来源于stack exchange，提问作者Kiran Bs