Harmonizing various client viewpoints in a ThreeJS scene featuring a unified mesh structure

I am fairly new to ThreeJS and I am curious to know if it is possible to achieve the following, and if so, how can it be done:

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

After going through the documentation on ThreeJS, it isn't clear to me whether each of the clients should be provided with their own 'camera' object for reference, or if multiple canvases, renderers, or just clever use of viewports are necessary...or perhaps something completely different...

I've seen examples like the galaxy sim on WebGL which involve syncing content between viewports, but I'm not sure if it's relevant in this case...

Any guidance would be greatly appreciated - thank you in advance!

javascriptthree.js

Answer №1

While Three.js alone cannot handle multiple clients, it is possible to synchronize changes over the network by connecting to a server where all clients can interact. Web pages function so that each user's browser downloads data from the web server independently, ensuring that users do not interfere with each other. Adding multiple cameras within Three.js would only benefit a single client and not allow for shared experiences.

For real-time synchronization across multiple clients, utilizing WebSockets is key. Socket.io is a popular JavaScript library used alongside Three.js for this purpose. Resources on using socket.io with three.js can easily be found through a quick Google search: https://www.google.com/search?q=three.js+socket.io

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining the functionality of a click event

Is it possible to combine these two functions in a way that ensures when '#css-menu' is shown, '.menu' becomes active, and vice versa? $('.menu').click(function() { $('#css-menu').toggleClass('shown hidden& ...

javascriptjquery

Steps for changing a component's properties when the component serves as a property

The scenario I'm facing involves a component that receives a prop named button. This button prop is essentially a Component itself, containing various other props within it. My goal is to override the specific prop called type within this nested struc ...

javascriptreactjs

The website functions properly in Chrome, but encounters issues in IE

Currently working on validating some JavaScript code. Chrome seems to be handling it well, but as expected, IE is causing some issues. Take a look at the code below: function validateData(a,id){ var inputs = document.getElementsByName('attname[] ...

javascriptinternet-explorer

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

I am currently coding in Zend Framework and facing an issue with the code provided below. Any suggestions for a solution would be appreciated. The following is my controller function that is being triggered via AJAX: public function fnshowinfoAction() { ...

javascriptjquerycssajaxzend-framework

What is the best way to load $cookies into an Angular service?

After defining an Angular service where I need to access a cookie, I noticed that the $cookieStore is deprecated and that it's recommended to use $cookies instead. This is how my service is set up: 'use strict'; var lunchrServices = angul ...

javascriptangularjscookies

Store information in Factory and retrieve it in the controller

I am encountering an issue with my code. Below is the factory code: .factory('shareDataService', function() { var sharedData = {}; sharedData.shareData = function(dateFrom, dateTo) { var from = dateFrom; var to = dateTo ...

javascriptangularjscontrollerfactory

What is the best way to send an array to a modal?

Utilizing Axios for retrieving a list of countries from a REST API, I have implemented modals with each displaying the name and flag of a country. Upon clicking on any country name, the console will log the selected country. I am looking to pass the last ...

javascriptvue.js

What is the reason behind Google Closure Compiler appending a variable to the global namespace when the original namespace was blank?

My long script is neatly enclosed within a (function() {/.../})() to prevent any name pollution. It has been typed with complete accuracy and zero warnings. I recently discovered that Google Closure compiler initially redefines i and j in the global names ...

javascriptgoogle-closure-compilergoogle-closure

Encountered a server issue (500 Internal Server Error) when attempting to send a POST

I have been working on a social media app project using React and MongoDB. However, every time I try to register a user, I encounter a POST error in the console. I have reviewed both my client-side and server-side code, but I am still unable to successfull ...

javascriptexpressmongoose

An issue occurred while deploying Docker on Railway services: Build Error

After successfully deploying my Django project on Railway, I decided to add SendGrid mail functionality using the django-sendgrid-v5 package. Everything worked fine in the development environment, including sending emails like user signups. However, when ...

javascriptpythondjangodockersendgrid

Having trouble configuring Angular-UI Router to work properly with Apache server

My web app is running on my PC through an Apache server, but I'm having issues with the routing provided by ui.route. It seems that the simple state I defined is never being reached. To troubleshoot, I added a wildcard to catch all paths and found th ...

javascriptangularjsapacheangular-ui-router

Master your code with Rxjs optimization

Looking at a block of code: if (this.organization) { this.orgService.updateOrganization(this.createOrganizationForm.value).subscribe(() => { this.alertify.success(`Organization ${this.organization.name} was updated`); this.dialogRef.close(true ...

javascriptangulartypescriptrxjs

WebpackError: The global object "document" could not be found

I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...

javascriptreactjsgatsbybulma

What are the best ways to maximize a web worker's ability to handle multiple tasks at once

I'm currently working on implementing a Web-Worker to handle its state while also managing multiple asynchronous requests. worker.ts file let a =0; //state of the worker let worker=self as unknown as Worker; worker.onmessage =(e)=>{ console ...

javascriptnode.jstypescriptweb-workerdeno

Changing the data request body in datatables ajax on button click

My goal is to initially fetch data when the page loads and then allow users to apply filters by clicking on them to fetch updated data. The query I am using is a POST request because it requires complex parameters that need to be formatted as JSON for bett ...

javascriptjqueryajaxdatatables

Firestore generates an error stating that 'onSnapshot() must have 1 to 4 arguments'

I am having trouble retrieving all unread messages for the current user from Firebase. The issue arises when using onSnapshot() as it initially fetches the required data but fails to do so when a new document is added, resulting in an error. FirebaseErro ...

javascriptfirebasevue.jsvuejs2google-cloud-firestore

jQuery returns varying values for checked status when using click() method versus manual click

I'm facing an issue with a checkbox generating dynamic content. Whenever I try to pre-create the dynamic content on page load by using click(), the "checked" attribute is not set until after the click function finishes. Strangely, when I manually cli ...

javascriptjquery

Arrange a collection of objects by two criteria: the end time, followed by the status in accordance with the specified array order if the end times are equal

Is this the best method to arrange data by using infinity? I gave it a try but it doesn't quite meet my requirements. data = [{ "status": "Accepted", "endTime": "" }, { "status": "New", ...

javascriptarraysangularsorting

Text appearing in varying sizes across browsers

I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it onl ...

javascripthtmlcss

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...

javascripthtmlcss