Synchronize a 3D scene across multiple windows using Three.js and localStorage

[jerbear4328]

A link to try this yourself: https://bgstaal.github.io/multipleWindow3dScene

The popular version by the same author with the very fancy graphics:

https://twitter.com/_nonfigurativ_/status/172732259457002734... (Code is not public, this demo sparked the whole thing)

The other project like this on HN the other day used Broadcast Channels instead of localStorage, so it didn't have the delay this one has:

GitHub (has a GIF): https://github.com/Momciloo/fun-with-sockets/ HN discussion: https://news.ycombinator.com/item?id=38413660

[abetusk]

In my opinion, the magic here is the `window.screen[XY]`, not the communication method, which could be anything.

As others have mentioned, you can do this with localStorage, websockets or even Cookies. The novelty is that each window knows its size and location (through `window.*`) and renders something interesting.

I was a bit surprised to see that the browser gives information of where the window is in the window manager as I would have guessed that to be privileged information and a potential security issue, but what do I know.

[AustinDev]

>I was a bit surprised to see that the browser gives information of where the window is in the window manager as I would have guessed that to be privileged information and a potential security issue, but what do I know.

My browser doesn't do that. Well it always reports. [0,0]

[supermatt]

Is there some reason to prefer localStorage over https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_C... ?

[brunohaid]

Broadcast is messaging only, localStorage can elegantly handle messaging and state data.

[brightball]

Saw a great lightning talk about Three.js this summer. Had no idea what could be done with it before and it was a little mind blowing.

https://youtu.be/QXPYYfxnTPU?si=Y56UmEhC8y3HkIPj

[dzign]

Nice discussion here :

https://www.reddit.com/r/nextfuckinglevel/s/d7J6dCZ5s9

[SamBam]

I would be fun to create a game with this.

I'm imagining something where the different windows allow different affordances. E.g. one window is your night-vision specs and the other is your HUD. Or perhaps you have six or more windows of some fixed small size, but you need to keep track of a large and changing scene, so you need to place them carefully to track as much of the landscape as possible. Maybe each window is one of a spider's eight eyes.

[pvg]

Discussed the other day here

https://news.ycombinator.com/item?id=38413660

[summitsummit]

i wonder if a visual of any kind would help

[CharlesW]

I believe that it's this: https://twitter.com/_nonfigurativ_/status/172732259457002734...

[jerbear4328]

Yeah, it's confusing to see empty READMEs like this, especially for a visual effect. The demo is at https://bgstaal.github.io/multipleWindow3dScene/ if you want to play around with it.

[dorkwood]

This can be said about 99% of GitHub repositories.

When I first started using GitHub, I thought there must be some reason that no one ever included images in their README. Maybe it's not considered cool, I thought.