# bgstaal/multiplewindow3dscene

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bgstaal-multiplewindow3dscene).**

18,960 stars · 2,922 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/bgstaal/multipleWindow3dScene
- awesome-repositories: https://awesome-repositories.com/repository/bgstaal-multiplewindow3dscene.md

## Description

This project is a cross-window 3D visualization system that maintains a consistent scene state across multiple open browser instances. It utilizes a local storage state synchronizer to share real-time application data between different browser tabs.

The system coordinates Three.js environments by syncing the internal scene graph, camera angles, and object positions. It achieves this through event-driven state propagation, allowing updates in one window to be reflected in all others without a dedicated backend server.

The implementation includes window lifecycle management to track the creation and removal of browser instances. This ensures a stable shared state and reliable cross-tab data communication across the active session.

## Tags

### Web Development

- [Cross-Window State Synchronizations](https://awesome-repositories.com/f/web-development/cross-window-state-synchronizations.md) — Provides a mechanism to maintain a shared 3D application state across multiple browser windows using local storage.
- [Cross-Tab Synchronization](https://awesome-repositories.com/f/web-development/state-synchronization/cross-tab-synchronization.md) — Enables real-time data communication between browser tabs without a backend server.

### Game Development

- [Cross-Window Mirroring](https://awesome-repositories.com/f/game-development/engine-architecture/scene-graphs/cross-window-mirroring.md) — Implements a system that mirrors the Three.js scene graph across multiple browser windows.

### Graphics & Multimedia

- [3D Scene Synchronizations](https://awesome-repositories.com/f/graphics-multimedia/3d-scene-synchronizations.md) — Synchronizes the 3D environment state across browser tabs using a shared local storage mechanism. ([source](https://cdn.jsdelivr.net/gh/bgstaal/multiplewindow3dscene@main/README.md))
- [Browser-Based 3D Visualizations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/3d-rendering-engines/browser-based-3d-visualizations.md) — Provides an interactive 3D visualization that remains consistent across multiple browser instances.
- [Three.js Scene Coordinations](https://awesome-repositories.com/f/graphics-multimedia/three-js-scene-coordinations.md) — Manages a single Three.js environment across different browser tabs to ensure reflected changes.

### Software Engineering & Architecture

- [Shared Coordinate Contexts](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/component-context-sharing/shared-coordinate-contexts.md) — Synchronizes 3D object positions and camera angles to ensure consistent visual coordinates across separate windows.

### User Interface & Experience

- [Event-Driven State Synchronizers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers.md) — Utilizes event-driven synchronization to propagate state changes to the UI across all open windows.
- [LocalStorage Synchronizers](https://awesome-repositories.com/f/user-interface-experience/event-driven-ui-frameworks/real-time-state-synchronization/localstorage-synchronizers.md) — Implements a synchronizer that shares real-time application state between tabs via the localStorage API.
- [Window Lifecycle Controllers](https://awesome-repositories.com/f/user-interface-experience/window-management/window-lifecycle-controllers.md) — Maintains a registry of active browser instances to coordinate the distribution of state updates.

### Development Tools & Productivity

- [3D Scene Synchronizers](https://awesome-repositories.com/f/development-tools-productivity/window-managers/multi-window-layout-managers/3d-scene-synchronizers.md) — Provides a implementation that synchronizes camera and object states across multiple windows using Three.js.