In this article, I will describe the process of creating a Solar System in JavaScript using the Three.js library. Getting to work Firstly, we need to create the structure of the application. In order to focus on the 3D graphics and not the build or other attributes of modern applications, we will make the , add Three.js via cdn, and create a element, which will be our scene. index.html #root Secondly, we will use CSS to stretch the element on full screen. #root Thirdly, we need to store the textures for the objects, so I created a directory . In order for the browser to access the textures, you can use a local server to view the . /textures index.html Creating a Scene In Three.js, to display, see and visualize something, we need a scene, a camera, and a visualization tool: Adding a Starry Sky We could simply use a texture to draw the stars, but we can solve this problem in an elegant way by: Generating three-dimensional coordinates Creating BufferGeometry, by getting three coordinates (x, y, z), which will be associated with a particular vertex Creating objects for the stars using geometry and material, after which we can add the stars to the scene The Sun We will create entities using the static method for a class . The static method allows it to call itself without creating an instance of the class (this will be useful for creating the Sun, for example). So, we pass the texture's name and geometry to it and return a mesh with specific geometry and specific material we will add to the scene: createObject ObjectGroup Planets The class also has a constructor. But why do we need two functions when we can make do with one? The point is that you can build a system using absolute or relative coordinates. In general, we on Earth live in relative coordinates because we don't think about the speed at which we rotate around the Sun. To avoid doing all the rotation maths for planets that are associated with other entities (like the Earth's Moon or Saturn's rings), we need to get a group of objects that are in the same coordinate system. We will return this group of objects from the constructor and add the group to the Sun's coordinate system: ObjectGroup To change the properties of planets outside the class, we should add this group to the collection when creating a group of planets: Map Our system will rotate around the Sun, as it should, at a speed relative to that of the Earth. const EARTH_YEAR = (2 * Math.PI) / 365 We need to change the rotation parameter while the application is running, so the code below needs to go through an animation loop: Lighting Let's add two light sources. will illuminate the entire scene regardless of the position of the objects, while will be placed at the center of the scene inside the Sun, thereby simulating sunlight: AmbientLight PointLight Conclusion All we have to do now is to start the render cycle: Congratulations! You have created a solar system using Three.js. It's simple, but we all have to start somewhere, and in this application, we've got the basics of 3D figured out. The full code is available on . GitHub

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How to Create a Solar System in JavaScript With Three.js 🌌

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Downside Liquidity: A Hypothesis on Short Pools for EVM

3 Common Types of 3D Sensors: Stereo, Structured Light, and ToF

3D Models at City Scale!

3D Technology: Explore to Know How It Benefited Businesses

6 Best Web 3.0 Trends We Will See in 2023

8 Editors To Get Started Writing Python

Downside Liquidity: A Hypothesis on Short Pools for EVM

3 Common Types of 3D Sensors: Stereo, Structured Light, and ToF

3D Models at City Scale!

3D Technology: Explore to Know How It Benefited Businesses

6 Best Web 3.0 Trends We Will See in 2023

8 Editors To Get Started Writing Python

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps