同步 Object3d 旋转（选项卡级别）

Question

需要帮助，

我正在尝试将活动浏览器选项卡中加载的一个对象的旋转与第二个选项卡中加载的另一个对象同步。在活动浏览器选项卡中加载的旋转对象将向另一个发送消息。在第二个选项卡中，将收听从第一个选项卡发送的消息，并使用旋转值相应地旋转对象。我的代码如下所示，（我参考了 this 示例）

 let objectLoaded;
 let previousMousePosition = {x : 0,  y : 0 };
    function mouseDown(e) {
        isDragging = true;
    }

    function mouseUp() {
        isDragging = false;
        if (objectLoaded) {
            // publishing the rotation value to another tab using 'hermes' package.
            hermes.send('rotation', JSON.stringify({
                rotation: objectLoaded.rotation,
                quaternion: objectLoaded.getWorldQuaternion(),
                matrix: objectLoaded.matrixWorld
            })); 
        }
    }

    function mouseMove(e) {
        const deltaMove = { x : e.offsetX - previousMousePosition.x,y : e.offsetY - previousMousePosition.y };         
        if (isDragging && objectLoaded) {
            const deltaRotationQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(toRadians(deltaMove.y * 1), toRadians(deltaMove.x * 1), 0, 'XYZ'));
            objectLoaded.quaternion.multiplyQuaternions(deltaRotationQuaternion, objectLoaded.quaternion);
        }
        previousMousePosition = {x : e.offsetX,  y : e.offsetY };
    }

    function toRadians(angle) {
         return angle * (Math.PI / 180);
    }

监听代码，

  hermes.on('rotation', (rotationObj) => {
  // rotationObj structure: {rotation: { _x: 0, _y: 0: _z: 0}, quaternion: { _x: 0, _y: 0: _z: 0, _w: 0}}
      const target = JSON.parse(rotationObj);
      SecondObject.rotateX(target.rotation._x);
      SecondObject.rotateY(target.rotation._y);
      SecondObject.rotateZ(target.rotation._z);
 })

这里的问题是第二个对象没有与第一个正确同步。有人知道我做错了什么吗？

谢谢，

Answer 1

在一个选项卡中，您请求当前（绝对）旋转。另一方面，您将添加中的那些值旋转到当前旋转。这将在您第一次设置非零旋转后立即中断。

您想要的是分配旋转，方法是

SecondObject.rotation.copy(target.rotation);

同步 Object3d 旋转（选项卡级别）

Sync Object3d rotation (tab level)

javascript

rotation

three.js