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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzNzY5NTgsIm5iZiI6MTcyMTM3NjY1OCwicGF0aCI6Ii8xMDA2NzM0OTcvMjg1NTM5ODI5LWUyZGNkODdhLTU0NzUtNGNjOS1iMzMwLTNlYzQ0ODNjYmE5Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOVQwODEwNThaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMDk0YTk3YjRmNmZkZDJmNGNlMzQzYjExYzZhZTU5MGNiNjVhMzNmNDRkZTBjNzFkOWEzMzg1YjEyNDY5YzFmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.pE_yprrR_ztd0pm62krcwj2_6aYp6JDlr2F0ENg0eTM)