Frontend is beyond just UI π
A Programmer Presents a Mind-Blowing Multi-Window Experience π±
Bjorn Staal, an independent Artist, Programmer, and Researcher, recently unveiled a magical-looking setup that allows the "synchronization" of a 3D scene across multiple browser windows. This innovative system, powered by Three.js and localStorage, was specifically made for developers eager to explore advanced web graphics and window management techniques.
Made by ππΓΈππ πΎππππ
Demo
Source Code
bgstaal
/
multipleWindow3dScene
A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
Multiple Window 3D Scene using Three.js
Introduction
This project demonstrates a unique approach to creating and managing a 3D scene across multiple browser windows using Three.js and localStorage. It's designed for developers interested in advanced web graphics and window management techniques.
Features
- 3D scene creation and rendering with Three.js.
- Synchronization of 3D scenes across multiple browser windows.
- Dynamic window management and state synchronization using localStorage.
Installation
Clone the repository and open index.html in your browser to start exploring the 3D scene.
git clone https://github.com/bgstaal/multipleWindow3dScene
Usage
The main application logic is contained within main.js and WindowManager.js. The 3D scene is rendered in index.html, which serves as the entry point of the application.
Structure and Components
-
index.html: Entry point that sets up the HTML structure and includes the Three.js library and the main script. -
WindowManager.js: Core class managing window creation, synchronization, and state management across multiple windows. -
main.jsβ¦
Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!
Don't forget to subscribe to our channel : Demo code
Top comments (0)