18.9K ·GitHub
What is this?
A small demo showing how to keep a single 3D scene visually continuous across multiple separate browser windows, using Three.js for rendering and localStorage to sync window positions and state.
A small demo showing how to keep a single 3D scene visually continuous across multiple separate browser windows, using Three.js for rendering and localStorage to sync window positions and state.Is this a library or just a demo page?It is a plain static demo made of a few JS files, not a packaged library or framework — there's no build step or npm package, just HTML and scripts.
It is a plain static demo made of a few JS files, not a packaged library or framework — there's no build step or npm package, just HTML and scripts.How do I run it?Clone the repo and open index.html directly in your browser, then open it again in new windows to see the shared scene sync.
Clone the repo and open index.html directly in your browser, then open it again in new windows to see the shared scene sync.Do I need Node, npm, or a build tool first?No. It bundles a minified Three.js (three.r124.min.js) directly, so there's nothing to install or build.
No. It bundles a minified Three.js (three.r124.min.js) directly, so there's nothing to install or build.How does window sync actually work, and are there any catches?Synchronization relies purely on localStorage events between windows of the same browser/origin, managed by WindowManager.js — it won't sync across different browsers or devices, and opening the file directly (file://) can run into localStorage/CORS quirks depending on the browser.
Synchronization relies purely on localStorage events between windows of the same browser/origin, managed by WindowManager.js — it won't sync across different browsers or devices, and opening the file directly (file://) can run into localStorage/CORS quirks depending on the browser.Which files should I actually look at to understand the logic?main.js initializes the Three.js scene and handles window/resize events, while WindowManager.js owns the cross-window lifecycle and localStorage-based state sync — index.html just wires them together.
main.js initializes the Three.js scene and handles window/resize events, while WindowManager.js owns the cross-window lifecycle and localStorage-based state sync — index.html just wires them together.What version of Three.js does it use?It ships a bundled minified build, three.r124.min.js, rather than pulling the library from a CDN or package manager.
It ships a bundled minified build, three.r124.min.js, rather than pulling the library from a CDN or package manager.Can I move or resize the browser windows and still see the shared scene?Yes — that's the core feature: WindowManager.js tracks each window's position/state via localStorage so the 3D scene reacts consistently as you move or resize windows.
Yes — that's the core feature: WindowManager.js tracks each window's position/state via localStorage so the 3D scene reacts consistently as you move or resize windows.What are similar projects?WebGL-Fluid-Simulation, natural-disasters, threejs-architecture-effects, LinearAbilityExtThreeJS, dioramas, floorplan-3d, grok-icon-study, aetherviz-master
WebGL-Fluid-Simulation, natural-disasters, threejs-architecture-effects, LinearAbilityExtThreeJS, dioramas, floorplan-3d, grok-icon-study, aetherviz-masterWhich topics is it in?localstorage, static, window-management, 3d-graphics, demo, creative-coding, no-dependencies, interactive, threejs, webgl, 3d, browser
localstorage, static, window-management, 3d-graphics, demo, creative-coding, no-dependencies, interactive, threejs, webgl, 3d, browser