This project demonstrates how to set up a synchronized 3D scene across multiple browser windows using Three.js and localStorage. It showcases the ability to create interactive 3D environments that can be manipulated in real-time across different windows, as long as they share the same origin. This is particularly useful for creating complex, multi-view setups for 3D modeling, gaming, or interactive art installations.
To set up the project, follow these steps:
- Clone the Repository: Clone this repository to your local machine.
- Install Dependencies: Navigate to the cloned directory and run
npm installto install all required dependencies.
- Starting the Server: Use
lite-serverto start a local development server. Iflite-serveris not installed, install it globally usingnpm install -g lite-server. - Launching the Application: Run
lite-serverin the project directory. This will open the project in your default web browser. - Opening Multiple Windows: Open multiple windows or tabs with the same URL to see the synchronized 3D scene.
- Interacting with the Scene: Changes made in one window, will be reflected in real-time across all open windows.
- The project uses
localStoragefor maintaining synchronization across windows. - Any interaction in one window is stored in
localStorageand is then retrieved in other windows to update the scene accordingly.
This project is heavily inspired by and based on the original work of bgstaal's multipleWindow3dScene
For further information or to contribute to the project, please visit the GitHub repository.