DEV Community

Solar system with Three.js

Mykhailo Toporkov 🇺🇦 on August 22, 2024

Hi! Today, I’m going to build a solar system using Three.js. But before we begin, you should know that the inspiration for this article came from a...

Read full post

𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 • Aug 22 '24

Wow, it's a great way to get started with Three Js. Another addition would be if you could explain some functions, how you're using them and the matrix multiplications.

Great work!

Mykhailo Toporkov 🇺🇦 • Aug 24 '24

Thx! Next time definitely will do!

𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 • Aug 24 '24

Sure, I'll be looking forward to it. ^^

rk gnanesh • Aug 23 '24

Try setting the pixel ratio, it will increase the quality of the rendering.

renderer.setPixelRatio(window.devicePixelRatio);

Mykhailo Toporkov 🇺🇦 • Aug 24 '24

Good catch! Though the simplest way to improve quality of the rendering is to pass antialias: true in render that will smooth out jagged edges. Updated for both, thx!

tq-bit • Aug 27 '24

Love how the motivation is a con against a flat earther.
Sir this project is awesome, great job

Ben Halpern • Aug 22 '24

Wow

Jacob Samuel G. • Aug 23 '24

And the moon? :(

Jean-Noël • Aug 23 '24

Which moon ? There are lot of moons in the solar system :p

Charles Robertson • Aug 23 '24

I was about to say there are a lot of stars, as well, in a solar system! 🤣
Although technically, you can get binary stars 🤔

Evan Langlois (UUDruid74) • Aug 23 '24

No, there are not a lot of stars in our solar system. Our "solar" system has a single star, the sun, aka sol. The rest of the stars belong to their own solar systems.

Brian Knowles • Aug 23 '24

I guess it's a good thing he said, 'a solar system' and not 'our.'

Evan Langlois (UUDruid74) • Aug 24 '24

A solar system is only going to have one star unless its a binary system. There are not "a lot of stars ... in a solar system". There is 1, rarely 2.

Charles Robertson • Aug 23 '24 • Edited

Here is one I did, of the inner planets, a few years ago, just with jQuery & GSAP:

codepen.io/charles1971/pen/BaNyqYE

Of course, it doesn’t use real 3D, like three.js, so you cannot zoom, pan, tilt or rotate.

I have used three.js before and it is great!

Gourav Sharma • Aug 27 '24

Hello 👋 I am new to ThreeJs and want to build cool and amazing 3D stuff like you but my pc does not support webGL2 and only supports WebGL1 and because of this its been difficult to do follow along any documented projects and Tutorials. I have build some projects with WebGL1 and they are amazing to me. My question is can I use my written scripts to run WebGL2 on some remote server through some application ?? if so please give me URL I need that

Mykhailo Toporkov 🇺🇦 • Aug 28 '24

I don't see mutch meaning in doing such thing, sice problem in your PC or rather Browser. If the browser does not support the newer version, there is nothing you can do...