Readit News logoReadit News
Posted by u/cryptography 3 years ago
Show HN: I made a site where you can travel in space in your browserspaceinbrowser.com/...
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.

SamBam · 3 years ago
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 · 3 years ago
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 · 3 years ago
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 · 3 years ago
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.
cryptography · 3 years ago
In browser, I'd recommend NASA Eyes.
scarmig · 3 years ago
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?
sgtnoodle · 3 years ago
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.

SamBam · 3 years ago
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. ;)

loudmax · 3 years ago
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.

BHSPitMonkey · 3 years ago
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 · 3 years ago
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.

cryptography · 3 years ago
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!:)

airstrike · 3 years ago
I believe you, but personally I can't travel anywhere on my Firefox on Mac. All I can do is turn around
Crespyl · 3 years ago
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 · 3 years ago
These CSS media queries will kill me one day -_- Sorry for the trouble you had there.
vmception · 3 years ago
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.

cryptography · 3 years ago
Let's 'teleport' for now. We'll 'travel' in the upcoming versions:)
jvanderbot · 3 years ago
Shameless plug for JPLs tool that has a similar role re exploring space missions and Planets.

https://space.jpl.nasa.gov/

https://www.jpl.nasa.gov/apps

esp

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

cryptography · 3 years ago
Thanks for the links!
evaluniverse · 3 years ago
I can't seem to get anywhere but earth, moon and mars. How do you navigate further?
cryptography · 3 years ago
My bad...I should've used the word 'teleport' not 'travel':P
jon_richards · 3 years ago
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.
sgtnoodle · 3 years ago
The 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 · 3 years ago
Thanks 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').

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.

dsmmcken · 3 years ago
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 · 3 years ago
Oh, I was struggling with the scrollbars issue. What you mentioned seems like a solution. I'll def try it. Thanks!
cryptography · 3 years ago
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