bgstaal / multiplewindow3dscene Goto Github PK
View Code? Open in Web Editor NEWA quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
License: MIT License
A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
License: MIT License
Hi,
I know this question has been answered before, but I am very new to coding, and need a detailed explaination of how and where I am supposed to run this code.
Thank you
This project will be awesome.
I can’t wait for you to finish it!
This project is great and innovative and I think you should submit this to experiments with google (https://experiments.withgoogle.com/submit)
If you looked at this Twitter Post and came here to reproduce what was shown in the video, locally, you might be a bit confused.
Since the repo seems to be stagnant and the README is a bit vague, I am attempting to clear up some of the confusion.
If you simply wish to try the project out, there's a live deployment.
Although this doesn't work as intended on my browser.
Or, if you want to try it out locally, you need to:
Note: Simply opening index.html will show you a white screen.
At this point, you will see a spinning cube with red edges, that means everything is fine.
This is just a stripped down version of that project, intended to be a basic example, hence the red cube. You can create someting similar by experimenting a bit. See here.
Note: These answers have been posted in other issues on this repo as well, I have tried to put all the basic answers together in one place. If @bgstaal wants, I can add these in the README as well.
Hi, I saw the original video and it's really amazing, but when I tried to play locally, I only saw a simple cube.
Many people may have the same problems when runing this project at first sight.
Could you share the full demonstration code?
See also #17 (comment), #10.
Please make this online using gh-pages
And put the link in readme file or description
Sorry if this is a dumb question, but how do we run this code?
I tried loading the html file in a browser, but got errors in the browser console...
Access to script at 'file:///D:/multipleWindow3dScene-main/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.
main.js:1Failed to load resource: net::ERR_FAILED
Please advise (in simple terms!) how we run this amazing code.
Thanks
What is the point of the function windowsUpdated
? All the function do is just call another function. It seems like it could be removed from the code.
Thanks for this amazing code!! Based on this multiwindow interaction code, we build a Multi-window Interactive Planet-Satellite System. Check it here.
We hope this can provide some help to anyone who wants to play with this codebase.
A detailed description of the code and how to run this on user systems.
😎 Can't wait to see the pros work their magic on this project.
If you have come here and on a whim downloaded this code ( like I did ),
It can be frustrating to just discover that it displays '3D wire-cubes'.
I can understand the confusion you arrive to, after I have spent some time digging into this to seek an answer (...and maybe the source code..), so fear not; read on for a better understanding to where this code is at, and what's going on in the posted picture.
The Source Code:
If you came here for a copy paste, please don't shoot the messanger on this one. .
The true author behind the work above, is actually (I didn't know this existed) an artist. You can see the true poster and more of his work's links on his twitter here.
"Okay? Well I want to do that 'thing in the photo'"
- Download this repo, and start to poke and play around.
- Go outsource information on three.js. Get a understanding of its range of potential.
- After this it's fuzzy for me to answer.
I have picked this up a project knowing very little in python. I wanted to tackle a project while going through the college course and learn navigation, function, and writing.
So I am novice on this input; just wanted to have a explanation to anyone coming here from any media source of that video. Wanted to give it's credit, and help OP 'bgstall' with the barrage of request for that.
-Notes-
I can say from my time on this project its a very adept learning curve, but a rather fun and addicting one.
Play around with creating your own shapes, or importing a three.js model.
Play around with containers for the spheres to get the photo reference's results.
Will post 'pull request' if I manage to get something similar to what Biorn Staal created in the reference photo.
Starting up http-server, serving ./
http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://127.0.0.1:8080
http://172.31.196.87:8080
Hit CTRL-C to stop the server
[2023-11-26T11:55:38.646Z] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
(node:375) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use node --trace-deprecation ...
to show where the warning was created)
[2023-11-26T11:55:39.144Z] "GET /three.r124.min.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:39.162Z] "GET /main.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:40.009Z] "GET /WindowManager.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:49.924Z] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:50.115Z] "GET /three.r124.min.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:50.367Z] "GET /main.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:50.742Z] "GET /WindowManager.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:50.926Z] "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:55:50.929Z] "GET /favicon.ico" Error (404): "Not found"
[2023-11-26T11:56:04.475Z] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:56:04.808Z] "GET /three.r124.min.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:56:04.908Z] "GET /main.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:56:05.956Z] "GET /WindowManager.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:56:06.154Z] "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:56:06.158Z] "GET /favicon.ico" Error (404): "Not found"
[2023-11-26T11:57:39.339Z] "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
[2023-11-26T11:57:39.340Z] "GET /favicon.ico" Error (404): "Not found"
Hello,
What could cause my browser just randomly popup and minimize all other windows and bring the repo on screen?
This issue occurred while I was reading the code.
I opened the live server plugin in vscode. After I modified the code page and updated it, the Windows data in the local storage would be garbled. The length of the array will become longer. And it cannot be fixed, even if cleaning up local storage. (The reason is that Windows Manager has already saved incorrect data and is listening for storage changes. Therefore, the error data has been continuously recovered.)
It may never appear in a production environment.
First things first - thanks for making this!
I just checked it out:
And it's just amazing, I have to make a issue saying this (really this is everything I wanted to convey)
Have a great day and, Respect for making This Repo.
Wishes from Sweden!
Will.
what is bgstal/multiple Windows3d Scene?
I suggest to use Channel Broadcast instead of locale storage
Using Channel Broadcast can be a more efficient way to manage communication between components or services compared to local storage, as it allows for real-time updates without the need for persistent storage.
Hello!
How about considering the cube's behavior when the browser window is hidden? Currently, when the window is hidden, there are no updates in the position and size of the hidden window in the local cache.
If we use split screen (feature available in Microsoft edge browser) the object gets duplicated onto the screen (check first screenshot) and when we exit the mode, it becomes one, but strangely (as in second screenshot), and this window gets isolated from other windows and other windows can no longer participate with this window (third screenshot).
ps: I'm a beginner here and also trying to understand what and why's that happening,
How to solve this :
Access to script at 'file:///D:/user/Threejs/multipleWindow3dScene-main/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.