THREE.js实现绕点旋转功能时出现异常渲染故障如何解决

场景基础结构 #

场景内每个元素都由3个Object3D组成链式嵌套结构，父子级顺序为cellPivot -> modifier -> setup：

• setup：通过调整尺寸、添加固定内边距来永久对齐加载的模型，设置完成后不再修改
• modifier：对对象执行实际的变换操作
• cellPivot：支持将modifier拖拽到单元格网格中

现有旋转逻辑 #

已实现静态物体（门）的绕支点旋转功能，核心代码如下：

three.Object3D.prototype.pivot = function(pivot, f) {
  pivot = lib.VecToVector3(three, pivot); // 仅为不同库的向量格式转换
  this.position.sub(pivot);
  f(this);
  this.position.add(pivot);
  return this;
};
three.Object3D.prototype.pivotRotate = function(pivot, axis, theta, rotational = false, abs = false) {
  if(abs)
    theta -= this.rotation.y; /// 逻辑不完善，仅处理y轴
  this.pivot(pivot, () => this.position.applyAxisAngle(axis, theta));
  if(rotational)
    this.rotateOnAxis(axis, theta);
  return this;
};

门的旋转调用代码：

this.o3d.userData.modifier.pivotRotate(this.o3d.userData.center, new three.Vector3(0, 1, 0), this.rot, true);

玩家旋转功能实现 #

玩家朝向根据输入方向计算，核心步骤如下：

1. 采集按键输入，计算预期移动方向的法向量
2. 通过Math.atan2(-normal[1], normal[0])计算目标朝向角度，角度计算逻辑已验证正确
3. 调用旋转方法更新玩家朝向：

this.o3d.userData.modifier.pivotRotate(this.o3d.userData.center, new three.Vector3(0, 1, 0), Math.atan2(-normal[1], normal[0]), true, true);

异常表现 #

按下A键（单独按下或与W/S组合按下）时，角色出现疯狂旋转。排查日志显示x、z轴旋转值达到-π，y轴旋转值来回跳变，不含A键的其他按键组合无此问题。

问题原因 #

1. Math.atan2返回的角度范围为[-π, π]，按下A键时目标角度刚好落在π与-π的临界点，当前代码未做角度归一化，导致计算出的旋转差值在π和-π之间来回跳变
2. 角度差值未做范围限制，差值超过±π时旋转方向取反，触发万向锁，导致x、z轴出现意外旋转值

修复方案 #

步骤1：新增角度归一化工具函数 #

将角度差值限制在[-π, π]范围内，避免临界点跳变：

function normalizeAngle(angle) {
  while (angle > Math.PI) angle -= 2 * Math.PI;
  while (angle < -Math.PI) angle += 2 * Math.PI;
  return angle;
}

步骤2：优化旋转差值计算逻辑 #

修改pivotRotate方法中abs参数的差值计算逻辑，使用归一化后的角度差值：

three.Object3D.prototype.pivotRotate = function(pivot, axis, theta, rotational = false, abs = false) {
  if(abs) {
    theta = normalizeAngle(theta - this.rotation.y);
  }
  this.pivot(pivot, () => this.position.applyAxisAngle(axis, theta));
  if(rotational)
    this.rotateOnAxis(axis, theta);
  return this;
};

步骤3：规避万向锁（可选） #

显式指定modifier的旋转顺序为YXZ，进一步降低万向锁触发概率：

this.o3d.userData.modifier.rotation.order = 'YXZ';

以上修改完成后，A键触发的异常旋转问题即可解决。

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