HN Explorer

Show HN: I made a site where you can travel in space in your browser (spaceinbrowser.com)

179 points by cryptography ↗ HN
I made this site using R3F (https://github.com/pmndrs/react-three-fiber), a React renderer for 3JS (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-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/

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.

81 comments

[ 4.2 ms ] story [ 119 ms ] thread
[deleted]
(comment deleted)
sellingwebsite
Looks interesting. How long did it take to build it all?
cryptography
Thanks! 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
Great. 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
Thanks! 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
Dell 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]
(comment deleted)
[deleted]
(comment deleted)
loudmax
Very neat!

This is similar in concept to the Celestia: 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
Yes! 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
I'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
The 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
Very 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 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
Oh, I was struggling with the scrollbars issue. What you mentioned seems like a solution. I'll def try it. Thanks!
SamBam
Neat.

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
Absolutely! 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
Not 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.
the__alchemist
Space 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.
scarmig
Doesn't the dark side of the moon get more light than the near side, because when it's facing the sun Earth doesn't block .1% or whatever of the sunlight that it does for the near side?
SamBam
Only during a lunar eclipse or partial eclipse.

I was actually going to add that to my post, but then figured another commenter would prefer to have the pleasure. ;)

sgtnoodle
As other folk have said, only during an eclipse. More specifically, light doesn't really diffuse like it does in atmosphere, because there aren't any particles to bounce off of. Technically space isn't a perfect vacuum, as there's stray particles all over the place. It's hardly enough to matter.

It seems like the near side of the moon could theoretically get more light on average. When light travels through the fringe of the Earth's atmosphere, it will diffuse and refract a bit. To some extent, some of that light will end up hitting the moon when it otherwise wouldn't have had the Earth not been there.

kmos17
Quite amazing, works well on mobile with some distortion on the moon in one quick look around.
cryptography
I wasn't sure about responsiveness in the mobile version...glad it works fine. Enjoy!
netsharc
I checked the location of ISS (against https://www.astroviewer.net/iss/en/ ), sadly it's not accurate.
cryptography
Yeap, 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!

PaulHoule
I like it. Particularly how the navigation is ‘on rails’ and users can get around to meaningful places and not get lost.
evaluniverse
I can't seem to get anywhere but earth, moon and mars. How do you navigate further?
cryptography
My bad...I should've used the word 'teleport' not 'travel':P
jon_richards
Oh, 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.
airstrike
I believe you, but personally I can't travel anywhere on my Firefox on Mac. All I can do is turn around
cryptography
Let's 'teleport' for now. We'll 'travel' in the upcoming versions:)
Crespyl
I 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
These CSS media queries will kill me one day -_- Sorry for the trouble you had there.
vmception
consider tailwinds library/framework

it has this stuff defined under classes pretty well

spicybright
Don'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
HAHA...Love aLtErNaTiVe SoLuTiOnS!:v
zrobotics
For absolute best-practices, there should be an animated under construction gif above the 'best viewed in' gif. Also, make sure to specify a very specific version of chrome that is out of date by at least 1 major version. That will definitely inspire confidence that this is a highly professional product.

Cool site though, very fun example of what can be accomplished in a browser.

heavyset_go
Under construction GIFs were deprecated in favor of the streamlined and better engineered dancing baby GIFs. There's a few stealth startups that are rumored to be developing dancing skeleton GIFs, but you didn't hear that from me. Get it in on the ground floor, it'll be a gold rush.
vmception
oh wow, I'm using an ultra-wide screen (with my browser window only occupying a portion) and had to do this too! I was so lost at first

yeah, OP is going to have to learn these CSS media queries (or use a framework with everything already defined) like they said.

raylus
Check out https://eyes.nasa.gov
cryptography
I 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
> 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
> 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
HAHA it's not, no worries! The goal is to bring the most space-like experience to your browser, the rest is not important.
macspoofing
Doesn'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
Performance 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
I want to be able to pinch and zoom out in google earth. And keep going, and going, and going…
cryptography
I 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
Mars population says 0, hope that will change end of this century.
GTP
Wow, 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
Thank 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

giantg2
I made... everything I made is an absolute pile of crap compared to this. Good job!
BHSPitMonkey
This 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
Right! 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;)