关于THREEJS问题

Question

​
我在3dmax里设置了机械臂box039的坐标轴是这样

但是在ThreeJS里我给他设定了一个旋转动画，他却绕着这一部分的最左端旋转

export function createJXBtween5(scene, gltf) {
// 记录模型的初始旋转
let initialRotation =null
gltf.scene.traverse((child) => {
    if (child.name == 'Box039') {
        initialRotation =child.rotation.z;
    }
})
var tweenRotation = new TWEEN.Tween({ rotation:initialRotation  }) // 初始旋转角度
  .to({ rotation: initialRotation+Math.PI / 2  }, 1000) // 目标旋转角度和持续时间
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function (object) {
    // 更新模型的旋转
    gltf.scene.traverse((child) => {
        if (child.name == 'Box039') {
            // child.position.x = object.x
            // child.position.z = object.z
            child.rotation.z =object.rotation ;
        }
    })
  })
  return tweenRotation;
}

这是为什么
我想实现这样的

Answer 1

【以下回答由 GPT 生成】

根据你提供的信息，在ThreeJS中，机械臂box039旋转的问题可能是由于旋转的参考点不正确导致的。参考点应该是机械臂的中心点，而不是左端点。

为了修复这个问题，你可以尝试以下方法：

1. 确保3D MAX中设置了机械臂box039的正确中心点作为旋转参考点。
2. 在ThreeJS中，通过设置box039模型的pivot属性来设置旋转的参考点。pivot可以是一个THREE.Vector3对象，它代表了旋转的参考点坐标。
3. 修改代码，首先在导入glTF模型时，为机械臂box039设置pivot属性。
4. 在更新模型旋转的部分，将pivot作为旋转的参考点。

以下是修改后的代码实现：

export function createJXBtween5(scene, gltf) {
    // 记录模型的初始旋转和参考点
    let initialRotation = null;
    let pivot = null;
    gltf.scene.traverse((child) => {
        if (child.name === 'Box039') {
            initialRotation = child.rotation.z;
            pivot = child.position;
        }
    });

    var tweenRotation = new TWEEN.Tween({ rotation: initialRotation })
        .to({ rotation: initialRotation + Math.PI / 2 }, 1000)
        .easing(TWEEN.Easing.Linear.None)
        .onUpdate(function (object) {
            // 更新模型的旋转
            gltf.scene.traverse((child) => {
                if (child.name === 'Box039') {
                    child.rotation.z = object.rotation;
                }
            });
        })
        .onStart(function () {
            // 设置旋转的参考点
            gltf.scene.traverse((child) => {
                if (child.name === 'Box039') {
                    child.pivot = pivot;
                }
            });
        });

    return tweenRotation;
}

通过以上步骤，你应该可以修复机械臂旋转的问题，并实现期望的旋转效果。如果这个解决方案没有解决你的问题，请告诉我，我将尽可能地提供更多的帮助。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^