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

jQuery, trigger a function when the document has finished loading

I have created the following code in an attempt to display a message to only Internet Explorer users visiting the page: <script src="jquery.reject.js"></script> <script> $(document).ready(function() { $.reject({ reject: { a ...

javascriptjqueryhtml

Display a placeholder page during the processing of an asynchronous task by Express JS

Perhaps this issue is either too simple to be overlooked or too complex to tackle, but despite my efforts of over 3 hours searching for a solution, I am unable to find one. It seems like it should be a common problem and I am just too inexperienced to loca ...

javascriptnode.jsexpressasync-await

What is the best way to execute code after an element has been included in ngFor in Angular 2+?

Within my component, there is a function that adds an element to an array displayed using *ngFor in the view. After adding the element to the array, I want to target it by ID and scroll to it. However, the issue is that this code runs before the element a ...

javascriptangularngfor

Ways to initiate state transition from child component to parent component using React Hooks?

In the parent component, I have the following: const [updateQuantity, quantity] = useState(1); const handleChangeQuantity = e => { console.log(e.target.value); console.log("TEST"); updateQuantity(e.target.value); }; I the ...

javascriptreactjsreact-hooks

Referencing a JSON object

Here is a JSON list of search terms: [ "halo", [ "halo reach", "halo anniversary", "halo 4", "halo 3", "halo mega bloks", "halo 2", "halo sleepsack", "halo wars", "halo reach xbox 360", "halo combat evolved" ], ...

javascriptjqueryjsonautocompletejsonp

What is the process for including an optional ngModelGroup in Angular forms?

I'm encountering an issue with incorporating the optional ngModelGroup in angular forms. Although I am familiar with how to use ngModelGroup in angular forms, I am struggling to figure out a way to make it optional. I have attempted to pass false, nu ...

javascriptangularangular-forms

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

javascripthtmlreactjs

How can I mirror just one side of a texture in Three.js / WebGL?

I am attempting to create a kaleidoscopic effect using only one side, but I have a large number of Points and would like the effect to be achieved within the shader. If there is a Threejs trick that can mirror half of the texture or the Points object, that ...

javascriptthree.jsglsl

Using jQuery to dynamically render unordered lists from JSON data

Struggling to create a dynamic unordered list with multiple nested levels? Finding it difficult to render the necessary markup for future functionality? Take a look at the HTML structure I've created on this jsfiddle link: <ul class="nav nav-sideb ...

javascriptjqueryhtmlarraysjson

A comprehensive guide to using Reactive Forms in Angular

I need help understanding how FormGroup, FormControl, FormArray work in Angular. The error message I'm encountering is: Type '{ question: FormControl; multi: true; choices: FormArray; }' is not assignable to type 'AbstractControl' ...

javascriptangulartypescript

Opt for JavaScript DOM manipulation over jQuery for element selection without depending on jQuery

I am attempting to target a specific element using JavaScript: element = '<div class="c-element js-element">Something Here</div>'; When I try to select this element with the following code: $(element) The result is not as expected ...

javascriptjqueryhtml

Generate and save a document

Upon clicking the button, I am trying to generate a CSV file and download it right away. My current approach is as follows: html: <a class="btn btn-primary" @click="downloadCsv">Download CSV</a> <a v-if="fileObjectUrl !== null" ref="down ...

javascriptvue.js

Localization for Timeago JS Plugin

Currently, I have integrated the jQuery TimeAgo plugin into my project and included the following code snippet for localization in Portuguese: // Portuguese jQuery.timeago.settings.strings = { suffixAgo: "atrás", suffixFromNow: "a partir de agora", ...

javascriptjqueryhtmltimeago

Retrieving information within a Vue component

I am struggling to access some data I have bound to a component without success. How can I achieve this? Below is my component: export default { name: 'component-vallingby', data() { return { } }, created() {}, methods: {} } And h ...

javascriptvue.js

A step-by-step guide on increasing native Time variables in JavaScript

How can I dynamically and repetitively add time (both hours and minutes) in JavaScript to effectively increment a date object? There are times when I need to add minutes, or hours, or a combination of both - and I want the resulting total time to be return ...

javascriptdatetimemomentjstimespan

Problem with Google Chart formatting

I currently have a Line chart displaying the Y axis as 20,000,000 and I would like to change the format to 20K. How can I modify the format in a Google chart? Any assistance is greatly appreciated. Code: <html> <head> <script type=" ...

javascriptgoogle-visualization

How do I reduce the size of a WinJS image file

Can anyone help me figure out how to retrieve the size (in pixels, bytes) of a picture in a Windows 8 app? I'm using openPicker to select the file but can't seem to find the size attributes. I want to display an error message if the file is too ...

javascriptwindowswinjs

Challenges with jQuery: Appending strings to a dynamically selected element

Hello everyone, I have a question regarding adding the string 'url(" ")' around my Any assistance you can provide would be greatly appreciated. Thank you! $(function() { $('#list li a').hover( function(){ $("#meow").css( " ...

javascriptjqueryhtmlcss

Ways to retrieve the ID of the clicked element from the child up to the parent

I currently have a Parent component and a Child component. The Child component contains inner elements called notes, with "delete" being one of them. My goal is to have the Child component return an ID to the Parent component when the delete element is cl ...

javascriptnode.jsreactjs

Steps for generating a unique division element for every javascript response

How can I dynamically create a new div for each response in JavaScript? The message is in JSON format containing all the messages sent and received. This is my JavaScript code: $.get("MessageServlet", function (responseJson) { $.each(responseJ ...

javascriptjqueryhtml