Synchronising multiple client perspectives within a single ThreeJS scene of single mesh object

Question

Relatively new to ThreeJS and would really like to understand whether the following is possible, and if so how it might be done:

• initially, 2 web browser clients on different machines want to load the same html-based Scene code, but view it from different perspectives
• client 1 wants to rotate the cube, and client 2 should see the cube being rotated
• client 2 wants to update the cube mesh texture on one face and client 1 should see the new texture.
• As 'n' other clients also load the app, they also want to be able to view the same mesh / updates from their own perspectives.

From reading all of the great docs on ThreeJS it's not clear to me whether what you are doing is to provide each of the clients with their own 'camera' object that they can reference, if this would mean providing multiple canvases, renderers or if just clever use of viewports...or something else entirely...

Have seen some of the examples like galaxy sim on WebGL which is about sync of content between viewports etc. but i am not sure this is the same thing...

Any pointers would be appreciated - thanks in advance!

Answer 1

This can be done but not with Three.js alone. Three only runs in a single client, in the browser of the person who opened the page. Same as with any HTML page. Web pages work so that the browser just downloads the data, static files from the web server, and runs it locally, so the different users don't affect each other in any way. So adding multiple cameras would not help, that would just enable a single client to have many cameras.

To synchronize changes over the network to several clients, you must use a server where the three.js app connect from all the clients. For realtime synchronization browsers have WebSockets, which are often used together with three.js for these kinds of things. A popular JS lib for socket programming is socket.io, https://socket.io/. There's info about using socket.io for three.js available when you google it, https://www.google.com/search?q=three.js+socket.io