Real-world demonstration of multiple screens using three.js for an immersive virtual experience

Check out these awesome examples of multiscreen capabilities:

webgl_multiple_canvases_circle

webgl_multiple_canvases_complex

webgl_multiple_canvases_grid

These examples even reference the Google Liquid Galaxy project: liquidGalaxy

I am exploring how to adapt my app to utilize multiple screens, such as four 1920x1080 displays, each showing a different part of an image.

After creating a basic proof of concept, which involves displaying content/canvas on new windows and syncing mouse positions via a node.js server and socket.io, I encountered issues when the windows are of different sizes.

Below is a case where this setup failed.

It's worth noting that the full app is not fully functional yet, as the screens are not compatible across different computers. I need to address this offset issue first.

If you're interested in trying it out or contributing, the project can be found here:

Screeny

Thank you for your support!

javascriptthree.jswebglmultiscreen

Answer №1

After some careful consideration, I realized that it made perfect sense to pass the windowHalfX value to each window. With this adjustment, the code now runs smoothly and has been updated. I appreciate your insight!

The key was to use the mouseMove event to transfer the size of the current window and subsequently update all windows based on where the movement occurred.

I am now delving deeper into creating fully functional examples for individual computers.

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

Calculate the time difference in hours using time zone in Javascript

Within my JavaScript object, I have the following information: var dateobj = { date: "2020-12-21 03:31:06.000000", timezone: "Africa/Abidjan", timezone_type: 3 } var date = new Date(); var options = { timeZone: dateobj.timezone }; var curr_date ...

javascriptdatetimetime

When the page is scrolled, trigger a click event on the next button in

Currently, I have a listing page that features pagination at the bottom. However, my goal is to transform this into an infinite loading page. The issue I am facing is that when the click event triggers after scrolling to the bottom, it makes calls for pag ...

javascriptjquery

JavaScript: Scroll Through Images Horizontally with Descriptions for Each Image

I am looking to create a horizontal scroller/slider that will display images with captions underneath each image. The data is provided in an array of objects, so I need to iterate through the data and populate each item in the scroller with the necessary i ...

javascriptimagesliderscroller

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

phpjavascriptajaxjsonundefined

I am looking to amalgamate a pair of scripts into a single cohesive work

Currently, I am utilizing jQuery toggleClass to switch CSS styles. $ (".test").click(function () { $(this).toggleClass('active'); }); Whenever I click outside of the Bootstrap menu, the menu gets hidden. In addition to this functio ...

javascriptjquery

Opting to utilize a multidimensional JavaScript array or object is a more efficient method

Here is a breakdown in JSON format: jsonResponse Folder 01 Product 01 - Folder 01 Product 02 - Folder 01 Product 03 - Folder 01 Folder 02 Product 01 - Folder 02 Product 02 - Folder 02 Product 03 - Fo ...

javascriptjsonjquerymultidimensional-array

retrieving a map containing the values from an array using the `.includes()`

Currently, I am attempting to map my routes based on the roles they possess. For example, my mapped routes may have roles like ["User", "Admin"] or just ["Admin"]. The current user can have one or multiple roles assigned to them. This particular function w ...

javascriptreactjsdictionary

Preventing Users from Uploading Anything Other than PDFs with Vue

I am currently working with Bootstrap-Vue and Vue2. Utilizing the Form File Input, I want to enable users to upload files, but specifically in PDF format. To achieve this, I have included accept="application/pdf": <b-form-file v-model=&quo ...

javascriptvue.jspdfbootstrap-vue

How to Restrict the Use of Conditional "If" Statements in Another Function in Angular 7

How can I use an IF condition inside a function to only execute once for a specific action and not for another action? I have a function that is called twice, but I want the first "IF" condition inside the function to only be triggered when the add bank b ...

javascriptangular

How to Transfer Data from a Dynamic Drop-down Menu to PHP for Processing and Presentation in a Div Element on the Same Web Page

I've scoured various online resources, including StackOverflow, but haven't been able to find a solution for this issue described in the title. On my base page, I have a dynamically generated dropdown list as shown below: <div class="tipfixtu ...

javascriptphpjqueryhtmlajax

Tips for sending a state into the gtm.js function?

As an intern at a startup, I am the sole front-end developer responsible for coding a website in Next.js. My boss has requested that I incorporate Google Tag Manager into the project. Following the example provided by Next on their GitHub page, I have succ ...

javascriptreactjsfunctionnext.jsgoogle-tag-manager

Unable to expand or collapse rows in ng-table

Looking to implement an expand and collapse feature for ng-table, where clicking on a row should expand it to show more detail. However, currently all rows expand on click. Any ideas on how to achieve this? Any assistance would be greatly appreciated, tha ...

javascripthtmlangularjs

How can I limit auto-search results to a specific city in India on Google Maps?

How can we restrict autosearch to only Pune city in India? I attempted the following: autocomplete.setComponentRestrictions( {'country': ['in']},{'city':['Pune']}); ...

javascriptjquerygoogle-maps

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Looking for a CSS Solution: Is there a way to achieve element.scrollLeft functionality in CSS without using javascript? I want to pre-scroll a scrollable container. Situation Overview: I have a scrollable container that houses various items. Some instanc ...

javascriptcsscss-animations

Retrieve information and display it in a text field using ajax

Hi there, I'm having some trouble with my current code and would appreciate any help you can offer. My goal is to filter data in a search box and display the corresponding results in text boxes. I've been searching online for hours trying to find ...

javascriptphpmysqlajax

Utilizing AngularJS directives with the power of string formatting

Looking at this JSON structure {textTemplate:"Name：{0}，Phone：{1}",controls:[{id:1,Name:"Name",type:"text"},{id:2,Name:"Phone",type:"text"}]} I'm unsure how to utilize the directive for converting strings into HTML controls This is what I&apos ...

javascriptc#htmlangularjsangularjs-directive

Observable<void> fails to trigger the subscriber

I am currently facing a challenge with implementing a unit test for an Observable in order to signal the completion of a process. While there is no asynchronous code in the logout function yet, I plan to include it once the full logic is implemented. The m ...

javascriptangulartypescriptunit-testingobservable

[webpack]: npm ERROR! Call stack size limitation exceeded

While trying to install webpack using npm i -D webpack, an error is encountered as shown below. npm ERR! Maximum call stack size exceeded npm ERR! A complete log of this run can be found in: npm ERR! /Users/shobhuiy1/.npm/_logs/2019-02-05T10_31_29_46 ...

javascriptnode.jsnpmwebpack

``Where can I find information on setting a timeout for a node.js application

Is it feasible to implement a timeout for running node.js? I am faced with the issue of connecting to external services that occasionally do not respond, causing my script to hang and the node.js process to freeze. I am seeking a solution to enforce the t ...

javascriptnode.js