7 ms·
Show HN: I made a site where you can travel in space in your browser
I made this site using R3F (https://github.com/pmndrs/react-three-fiber https://github.com/pmndrs/react-three-fiber), a React renderer for 3JS (https://threejs.org/ https://threejs.org/).
The celestial bodies are Three.JS meshes.
I used loaders (namely 'useLoader' from R3F and 'GLTFLoader' from 3JS) to import 3D models, such as International Space Station. More on loading models in R3F: https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models https://docs.pmnd.rs/react-three-fiber/tutorials/loading-mod...
I've future plans for this side project. It would be great to hear from the HN community before diving into them. Enjoy!
P.S: Getting an empty (probably black) screen? This app shows up in browsers that support WebGL2.0 (most modern browsers do). Check this site to see whether your browser supports WebGL2.0: https://get.webgl.org/webgl2/ https://get.webgl.org/webgl2/
P.S.S: There'll probably be responsive design issues. I'd highly encourage you to use a desktop version or rotate to landscape while using a mobile version.
- pmontra 4y agoI do see the spinning cube in the test site but your site is black in Firefox Android. Oh well, space is very black so I shouldn't complain.
- cryptography 4y agoGood humor!;) Hmmm...How about you check this open-source racing game which is also R3F project (not by me): https://github.com/pmndrs/racing-game https://github.com/pmndrs/racing-game Let me know if your screen is black for this game as well.
- pmontra 4y agoThe racing game works on desktop Firefox on Ubuntu. Kind of. I get only jumpy spinning random frames once the car starts. Maybe it's https://github.com/pmndrs/racing-game/issues/152 https://github.com/pmndrs/racing-game/issues/152 The space travel site works on desktop Firefox but I can only click and drag. I didn't find any way to zoom. Basically I'm stuck on the objects I can see: Earth, Moon and Mars. But I didn't even looked for help in the other comments. Got work to do now. Thanks for answering :-)
- mkoryak 4y agothe music is great. i will now go and listen to more laser hawk.
- cryptography 4y agoCheck out this album too: https://lazerhawk.bandcamp.com/album/redline https://lazerhawk.bandcamp.com/album/redline
- bploetz 4y agoIf you're looking for other space-themed music to play, might I suggest https://spacejunkisforever.bandcamp.com/album/space-junk-is-forever https://spacejunkisforever.bandcamp.com/album/space-junk-is-...
- cryptography 4y agoNoted. Thanks for sharing!
- deleted 4y ago[deleted]
- sellingwebsite 4y agoLooks interesting. How long did it take to build it all?
- cryptography 4y agoThanks! It's my first project on R3F. So I was both learning and building. It took less than 2 months: I spent last 2 weeks mainly on performance optimization as it was super slow.
- ochrist 4y agoGreat. Looks fun. I tried this on Firefox on Linux (Ubuntu/desktop). If I travel to the moon and rotate it a bit, the Earth becomes quite elongated.
- cryptography 4y agoThanks! Interesting...Tbh, I was expecting responsive design issues. Would you mind to tell me what device you're using? Knowing the screen sizes might help me to fix it.
- ochrist 4y agoDell XPS desktop. The monitor is an Asus screen with a resolution of 1600 x 900. But the problem is the same on other devices using Windows (tested on laptop and desktop using Chrome and Firefox). Turn on the light to see the Earth more clearly.
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- loudmax 4y agoVery neat! This is similar in concept to the Celestia: https://celestia.space/ https://celestia.space/ Celestia has been around for years so the spaceinbrowser site can't really compare in terms of features. But being able to run in a browser rather than having to download and install a desktop application makes it so much more accessible. The effort put into performance optimization shows. I'd love to see more planets added.
- cryptography 4y agoYes! That's the motivation I've too. Bringing all these experience to browser without downloading anything. More planets, more space stations coming soon. Stay tuned!:)
- BHSPitMonkey 4y agoI've been wishing for a while for someone to successfully port Celestia to wasm+WebGL; It's a bit beyond my capabilities, but there's nothing keeping it from being possible (the codebase already supports multiple frontends / build targets / graphics backends).
- cryptography 4y agoThe same here. That was the motivation to start learning WebGL. As I'm a JS developer, R3F was the most comfortable 'WebGL-like thing' to go for me. So far I'm happy with R3F, but it's even more powerful when you can build your own 3D models (in engines like 'Blender' for instance) and integrate them into the canvas.
- dsmmcken 4y agoVery nice. I really like working in R3F too. Windows doesn't autohide scrollbars like mac, so the infobox you get these big always shown empty scrollbars. See: https://ibb.co/SxBvfZS https://ibb.co/SxBvfZS Also, when I click around, the logo image also occasionally gets selected due to rapid clicking and moving. Consider adding css to change overflow-y to auto on the infobox rather than scroll, and user-select: none; to the canvas element.
- cryptography 4y agoOh, I was struggling with the scrollbars issue. What you mentioned seems like a solution. I'll def try it. Thanks!
- netsharc 4y agoI checked the location of ISS (against https://www.astroviewer.net/iss/en/ https://www.astroviewer.net/iss/en/ ), sadly it's not accurate.
- cryptography 4y agoYeap, it's not a real animation of the ISS (at least its real speed is much slower than it shows in the app). Sorry for disappointment lol Hopefully soon I'll be able to integrate it to some open APIs (showing real ISS location). Thanks!
- SamBam 4y agoNeat. The relative sizes are super inaccurate. I know you know this, and I know in many ways it helps to have them be inaccurate so you can find anything in space, but the Earth and Moon look to be almost touching. In actuality, you can nearly fit every single planet in the solar system in a line between the Earth and Moon. It's slightly more accurate when you click on the Earth, but the solar system view they look like they're nearly touching. Also, small nit-pick, but I wouldn't use the term "dark side of the moon," and you also deepen this misconception by having it be literally dark and need to be lit up using a light bulb. The "far side of the moon" (better terminology) gets just as much light as the near side.
- cryptography 4y agoAbsolutely! Not accurate at all! I had this debate a lot during the development: being realistic vs being user-friendly. I'd still choose being realistic because I don't want to build a game but to 'simulate' a real space. When it comes to the distance between the Moon and the Earth, I think the problem there is more about the sizes of them rather than distance. Agree with "far side". I'll change it, let's not mislead people:) Thanks for the comment. Very helpful!
- zamadatix 4y agoNot in the browser but if you want the best "tries to be accurate" version of this concept I recommend Space Engine. Have yet to see anything else that comes close.
- cryptography 4y agoIn browser, I'd recommend NASA Eyes.
- the__alchemist 4y agoSpace Engine (avail for free on its website, or on Steam to support devs) is amazing! Beautiful, amazing attention to detail, and realistic. Shows objects we know details about with those details (eg things in our solar system), and procedurally generates the rest.
- 4y ago
- kmos17 4y agoQuite amazing, works well on mobile with some distortion on the moon in one quick look around.
- cryptography 4y agoI wasn't sure about responsiveness in the mobile version...glad it works fine. Enjoy!
- PaulHoule 4y agoI like it. Particularly how the navigation is ‘on rails’ and users can get around to meaningful places and not get lost.
- cryptography 4y agoGlad to hear it! Enjoy!;)
- evaluniverse 4y agoI can't seem to get anywhere but earth, moon and mars. How do you navigate further?
- cryptography 4y agoMy bad...I should've used the word 'teleport' not 'travel':P
- jon_richards 4y agoOh, from the title I was really hoping this was a relativity simulator. It would be neat to travel between stars at different speeds and see them age weirdly.
- cryptography 4y agoMaybe one day;)
- airstrike 4y agoI believe you, but personally I can't travel anywhere on my Firefox on Mac. All I can do is turn around
- cryptography 4y agoLet's 'teleport' for now. We'll 'travel' in the upcoming versions:)
- Crespyl 4y agoI had trouble moving around at first too, but after maximizing my FF window I was able to see a navigation/teleport panel that had been hidden off the right side of the screen. It should have a couple of buttons with points of interest to jump to.
- cryptography 4y agoThese CSS media queries will kill me one day -_- Sorry for the trouble you had there.
- vmception 4y agoconsider tailwinds library/framework it has this stuff defined under classes pretty well
- cryptography 4y agoThanks!
- spicybright 4y agoDon't feel too bad, browser differences is probably the biggest pain point in modern webdev today. Just put a "Best Viewed in Chrome" animated gif at the bottom to cover your butt!
- cryptography 4y ago
- raylus 4y agoCheck out https://eyes.nasa.gov https://eyes.nasa.gov
- cryptography 4y agoI know about NASA Eyes. That's the greatest and most realistic illustration of the space I've ever seen in the browser. The Beta version of my project might look similar to NASA Eyes, but it'll start to differ soon once developed further. One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to.
- kingcharles 4y ago> One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to. I have no idea what this means...
- raylus 4y ago> One hint: just imagine using your digital signature (NFT or whatever you call it) and traveling in space with your VR devices in your browser? Sounds cool?! This is where this project is heading to. Same bit of confusion as above, and by your name being 'cryptography' I guess I'm just hoping this isn't a planet-based NFT project :(
- cryptography 4y agoHAHA it's not, no worries! The goal is to bring the most space-like experience to your browser, the rest is not important.
- macspoofing 4y agoDoesn't seem like you can "travel" (just jump around), and it looks like just (low poly) models of Earth/Moon/Mars (so not quite 'space'). The relative sizes and distances are wrong. Are you sure you didn't want to spend a little bit more time on it before showing it off?
- tantalor 4y agoPerformance is really bad, ~20 fps on chrome linux, but feels slower than that. Edit: oh it suddenly shot up to 60 fps. Weird
- dr_dshiv 4y agoI want to be able to pinch and zoom out in google earth. And keep going, and going, and going…
- cryptography 4y agoI disabled the zooming option on purpose as 3JS geometries (the celestial bodies) are empty inside. Any 3D dev who knows how to fix this issue, please let me know:)
- jackallis 4y agoMars population says 0, hope that will change end of this century.
- cryptography 4y agoEnd of this century is too late!:P
- marcodiego 4y agoReminds me of Celestia.
- reaperducer 4y agoReminds me of Visible Solar System https://archive.org/details/d64_Visible_Solar_System_1982_Commodore https://archive.org/details/d64_Visible_Solar_System_1982_Co...
- ramon 4y agoSo nice, thanks for doing this!
- cryptography 4y agoGlad you liked it!
- GTP 4y agoWow, I like how depending on the object you're looking at you can get different information, and the added humor is definitely a plus.
- cryptography 4y agoGlad you noticed the details;)
- cryptography 4y agoThank you all for the great comments. I'm glad most of you liked it! It's just the beginning of the journey for SpaceInBrowser. If you would like to know about the upcoming developments, consider following SIB's Twitter account: https://twitter.com/spaceinbrowser https://twitter.com/spaceinbrowser
- giantg2 4y agoI made... everything I made is an absolute pile of crap compared to this. Good job!
- cryptography 4y agoEmmm...Thank you!
- BHSPitMonkey 4y agoThis is cool! Note that Starbase is listed as an active crew launch site, but it's actually a development facility with no certain future as a launch site for crewed missions.
- cryptography 4y agoRight! I just couldn't stop myself from not adding Starbase to this project!:D Well...maybe I should add a new category (work-in-progress launch sites). Noted;)
- ge96 4y agoGLTF is so great can import stuff from SketchUp
- cryptography 4y agoA lifesaver!
- bpodgursky 4y agofwiw I created a version of this a couple years ago that does actually do distances to scale, and tries to simulate actual motion: http://uncharted.bpodgursky.com/ http://uncharted.bpodgursky.com/ It's gone stale and has some visual glitches, but should still mostly work. (source https://github.com/bpodgursky/uncharted https://github.com/bpodgursky/uncharted)
- cryptography 4y agoThat's beautiful. Thanks for sharing!
- sgtnoodle 4y agoThe web site states, as a matter of fact, that all engineering problems to colonize Mars must be first solved on the moon. That's not really a fact, though, is it? Like, it seems like a reasonable plan for incrementally derisking things, but it doesn't seem strictly necessary. It also seems like there's technical problems that are unique to Mars, and technical problems that are unique to the moon. For example, landing on the moon can only really be done propulsively due to the lack of atmosphere. On Mars, though, there's atmosphere to aero-brake with. Or, insulation is relatively easy on the moon because of the lack of convection and conduction, while it's really difficult on Mars despite the temperature swings being considerably less severe.
- cryptography 4y agoThanks for an interesting comment. I wouldn't say that the website states specifically about 'all engineering problems' but more a 'salesy' statement (also sounded several times by NASA while explaining their Artemis mission - 'https://www.youtube.com/watch?v=_T8cn2J13-4&t=22s https://www.youtube.com/watch?v=_T8cn2J13-4&t=22s'). But like everything else, there is some truth to this that without a base on the Moon, the possibility of facing unpleasant surprises on Mars is even more. Additional to the experiments in 'Mars-like' places on the Earth, it would add more value by making similar experiences in outer space such as on the Moon. Agree with you that Mars introduces technical challenges (like the atmospheric ones you mentioned) that are not specific to the Moon. IMO, also the spacecraft aiming to travel to Mars (such as 'Starship') should prove their reliability to the distances that have already been traveled (like ISS, Moon) before sending them to unknown territories.
- jvanderbot 4y agoShameless plug for JPLs tool that has a similar role re exploring space missions and Planets. https://space.jpl.nasa.gov/ https://space.jpl.nasa.gov/ https://www.jpl.nasa.gov/apps https://www.jpl.nasa.gov/apps esp https://eyes.nasa.gov/apps/orrery/#/home https://eyes.nasa.gov/apps/orrery/#/home You should apply to work on these tools here at JPL as often as you can. the application queue is occasionally flushed but new jobs are posted all the time. https://JPL.jobs https://JPL.jobs
- cryptography 4y agoThanks for the links!
- mrtri 4y ago