[HN Gopher] Show HN: I made a site where you can travel in space...
___________________________________________________________________
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), 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.
Author : cryptography
Score : 146 points
Date : 2022-04-29 12:40 UTC (10 hours ago)
(HTM) web link (spaceinbrowser.com)
(TXT) w3m dump (spaceinbrowser.com)
| mkoryak wrote:
| the music is great. i will now go and listen to more laser hawk.
| cryptography wrote:
| Check out this album too:
| https://lazerhawk.bandcamp.com/album/redline
| bploetz wrote:
| If you're looking for other space-themed music to play, might
| I suggest
|
| https://spacejunkisforever.bandcamp.com/album/space-junk-
| is-...
| cryptography wrote:
| Noted. Thanks for sharing!
| PaulHoule wrote:
| I like it. Particularly how the navigation is 'on rails' and
| users can get around to meaningful places and not get lost.
| cryptography wrote:
| Glad to hear it! Enjoy!;)
| [deleted]
| jackallis wrote:
| Mars population says 0, hope that will change end of this
| century.
| cryptography wrote:
| End of this century is too late!:P
| BHSPitMonkey wrote:
| 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 wrote:
| 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;)
| cryptography wrote:
| 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
| evaluniverse wrote:
| I can't seem to get anywhere but earth, moon and mars. How do you
| navigate further?
| cryptography wrote:
| My bad...I should've used the word 'teleport' not 'travel':P
| jon_richards wrote:
| 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.
| cryptography wrote:
| Maybe one day;)
| giantg2 wrote:
| I made... everything I made is an absolute pile of crap compared
| to this. Good job!
| cryptography wrote:
| Emmm...Thank you!
| SamBam wrote:
| 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.
| zamadatix wrote:
| 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.
| cryptography wrote:
| In browser, I'd recommend NASA Eyes.
| the__alchemist wrote:
| 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 wrote:
| 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 wrote:
| 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. ;)
| cryptography wrote:
| 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!
| kmos17 wrote:
| Quite amazing, works well on mobile with some distortion on the
| moon in one quick look around.
| cryptography wrote:
| I wasn't sure about responsiveness in the mobile version...glad
| it works fine. Enjoy!
| dr_dshiv wrote:
| I want to be able to pinch and zoom out in google earth. And keep
| going, and going, and going...
| cryptography wrote:
| 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:)
| marcodiego wrote:
| Reminds me of Celestia.
| reaperducer wrote:
| Reminds me of Visible Solar System
|
| https://archive.org/details/d64_Visible_Solar_System_1982_Co...
| airstrike wrote:
| I believe you, but personally I can't travel anywhere on my
| Firefox on Mac. All I can do is turn around
| cryptography wrote:
| Let's 'teleport' for now. We'll 'travel' in the upcoming
| versions:)
| Crespyl wrote:
| 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 wrote:
| These CSS media queries will kill me one day -_- Sorry for
| the trouble you had there.
| spicybright wrote:
| 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 wrote:
| HAHA...Love aLtErNaTiVe SoLuTiOnS!:v
| vmception wrote:
| consider tailwinds library/framework
|
| it has this stuff defined under classes pretty well
| cryptography wrote:
| Thanks!
| vmception wrote:
| 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.
| netsharc wrote:
| I checked the location of ISS (against
| https://www.astroviewer.net/iss/en/ ), sadly it's not accurate.
| cryptography wrote:
| 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!
| sellingwebsite wrote:
| Looks interesting. How long did it take to build it all?
| cryptography wrote:
| 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.
| ramon wrote:
| So nice, thanks for doing this!
| cryptography wrote:
| Glad you liked it!
| [deleted]
| pmontra wrote:
| I 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 wrote:
| Good 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
|
| Let me know if your screen is black for this game as well.
| [deleted]
| GTP wrote:
| 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 wrote:
| Glad you noticed the details;)
| dsmmcken wrote:
| 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 wrote:
| Oh, I was struggling with the scrollbars issue. What you
| mentioned seems like a solution. I'll def try it. Thanks!
| loudmax wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| ge96 wrote:
| GLTF is so great can import stuff from SketchUp
| cryptography wrote:
| A lifesaver!
| raylus wrote:
| Check out https://eyes.nasa.gov
| cryptography wrote:
| 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 wrote:
| > 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 wrote:
| > 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 wrote:
| 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 wrote:
| 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 wrote:
| Performance is really bad, ~20 fps on chrome linux, but feels
| slower than that.
|
| Edit: oh it suddenly shot up to 60 fps. Weird
| ochrist wrote:
| 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 wrote:
| 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 wrote:
| 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.
___________________________________________________________________
(page generated 2022-04-29 23:00 UTC)