Skip to content
Get packs

multipleWindow3dScene

A small demo showing a three.js 3D scene kept in sync across multiple browser windows via localStorage.

GitHub Download source
Stars
18.9k
Forks
2.9k
Licence
MIT
Language
JavaScript
Last update
2.9 years ago
Type
Learning resource

No commits in over a year — check for forks or alternatives before adopting.

What it is

This is a small example project that shows how a 3D scene can appear to span several browser windows at once. It uses the three.js library to draw the scene and the browser's localStorage to share state between windows so they stay in sync. It is mainly a reference for developers who want to see one approach to multi-window web graphics.

  • Open index.html in two browser windows and watch the shared 3D scene respond across them
  • Read WindowManager.js to see how window creation, synchronization, and removal are handled
  • Study main.js to see how a three.js scene is initialized and redrawn on resize events
  • Use the project as a base for experimenting with other multi-window visual ideas

Great for

  • Developers exploring three.js and browser graphics techniques
  • Students learning how localStorage can share state between browser windows
  • Developers who want a minimal starting point for a multi-window visual effect

Not ideal for

  • People who need a finished end-user application, since the README describes it as an example
  • Teams needing production-grade state sync, because the README does not describe error handling, conflict resolution, or scaling
  • Anyone wanting a ready-made library, since this is a demo rather than a reusable package
Step-by-step guide: how to use multipleWindow3dSceneInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Clone and build from source

    You'll need: Git · A modern web browser

    Clone the repository

    git clone https://github.com/bgstaal/multipleWindow3dScene
  2. 2

    Run it

    • Clone the repository with git
    • Open index.html in your browser
    • Open a second browser window to the same page to see the synchronized scene
  3. 3

    Get the most out of it

    • Read WindowManager.js first, since the README names it as the core class for window synchronization
    • Check main.js for how resize events and scene updates are wired together
    • Replace the bundled three.r124.min.js if you want to test against a newer three.js version, then verify the code still works

Downloads

Source code (.zip)main branch · straight from GitHub

Strengths

  • Simple structure with a small number of files to read through
  • Uses three.js, a widely known and documented 3D library
  • Released under the permissive MIT License

Trade-offs

  • The README is brief and does not describe the scene's behavior in detail
  • No releases or topics are listed, and the last push was in November 2023
  • Bundles an older three.js build (r124), so it may not match current three.js APIs

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.