A simple example showing how to setup a 3d scene across windows on the same origin using three.js and localStorage.
This is based on https://github.com/bgstaal/multipleWindow3dScene
demo.mp4
- Multi-Window Synchronization: Using
localStorage
, the 3D scene's state is synchronized across multiple browser windows. - three.js Integration: Leveraging the power of
three.js
to render 3D graphics. - Responsive Design: The 3D scene adjusts to different window sizes, maintaining its visual consistency.
To get started with this project, follow these steps:
-
Clone the Repository:
git clone https://github.com/ShinoKana/multipleWindow3dScene.git cd multipleWindow3dScene
-
Install http-server:
If you don't have
http-server
installed globally, run:npm install -g http-server
-
Start the Server:
In the project directory, start the server by running:
http-server
-
Open the Application:
Open your web browser and navigate to
http://127.0.0.1:8080
or the URL provided in the command line output. -
Open Multiple Windows:
To fully experience the multi-window setup, open multiple instances of the URL in different windows or tabs.
![cba819282e1fc915f926f2ed45a97e3](https://private-user-images.githubusercontent.com/100673497/285539829-e2dcd87a-5475-4cc9-b330-3ec4483cba96.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzNzIyNTAsIm5iZiI6MTcyMTM3MTk1MCwicGF0aCI6Ii8xMDA2NzM0OTcvMjg1NTM5ODI5LWUyZGNkODdhLTU0NzUtNGNjOS1iMzMwLTNlYzQ0ODNjYmE5Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOVQwNjUyMzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01M2ZiNTNmOGRmYjEwZDI1MGJjYmM3MmI5OTFlZDAzMWQ1OTkzNThiYThlNzZjMDdiY2U0Nzg2NmZlMGZjNDJmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bPkAROl44ffkFHp0RdYhrwGm4sJT3awvOzcIV0A8p1M)