Change user's scene from change event in admin's scene

Hi everyone!

I’m trying to implement a share screen experience cross-browser through WebSocket and Threejs.

I want when the administrator changes the 3d scene in the admin portal, the 3d scene at the user will also change.

I added an event listener for 3d scene in the admin portal and send data event to the user’s browser through Websocket.

// code listen event change in admin site

controls = new OrbitControls(camera, renderer.domElement);

controls.addEventListener('change', function (event) {

render();

// send data to user's browser

emitEvent(event);

});

this is data I give when has event change: https://jsoneditoronline.org/…

But I can’t apply data events to change the user’s scene follow the scene in the admin portal.

// here is code listen event change in user's site

// apply event changed scene
socket.on('changed_scene', (event) => {

console.log(JSON.stringify(event));

let matrix = event.target.object.object.matrix;

// not working

camera.matrixAutoUpdate = false

camera.matrix.set(...matrix);

render();

});

I really need help. please help me if you know.

Thank you very much!

let matrix = event.target.object.object.matrix;

Change it to event.target.object.matrix

camera.matrix.set(…matrix)

matrix is a THREE.Matrix4 instance, and is not iterable. You are supposed to use matrix.elements instead. I recommend camera.matrix.fromArray(matrix.elements) or camera.matrix.copy(matrix) here, so you don’t have to care about the transpose thing.

1 Like

Thank you very very much. It’s working well