Seeking assistance,
I am attempting to synchronize the rotation of an object loaded in the active browser tab with another object loaded in a second tab. The idea is that when the Object in the active browser tab rotates, it will send a message to the Object in the second tab which will listen and rotate accordingly based on the received values. Below is my code snippet (I referenced this example):
let objectLoaded;
let previousMousePosition = {x : 0, y : 0 };
function mouseDown(e) {
isDragging = true;
}
function mouseUp() {
isDragging = false;
if (objectLoaded) {
// Sending rotation information to the second 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);
}
Listener code,
hermes.on('rotation', (rotationObj) => {
// Structure of rotationObj: {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);
})
The main problem I am facing is that the second object does not sync properly with the first one. Can anyone point out what might be going wrong here?
Appreciate any guidance,