Solar System in WebVR tutorial – Using objects in WebVR to create VR Experience

Solar System in VR

Our solar system is created of multiple components.

1. Adding photo background in VR
2. Adding objects in VR
3. Adding text in VR

This is part of #DaysInVR series. View All VR Projects. Yesterday we created where’s waldo in VR. Today we’re going to make solar system in VR and learn how.

Adding galaxy photo background

Adding galaxy is the simplest step and if you’ve followed our other tutorials like 360 photos in VR, then this should be easy for you. Create a SphereGeometry and create a material with the galaxy texture.

Adding planet objects to our scene

We have to add our planets as objects in WebVR. We’ll be using SphereGeometry for our planets. The procedure is same for all the planets that we have to add.

For our example, we’ll see how to add Mercury. We’ll learn how to add models in WebVR.

We’ll have to use MeshLambertMaterial and we’ll use AmbientLight to view the scene.

We’ll follow the same method to each planet into the scene.

Adding text in WebVR

To add the text next to the planet, we’ll use TextGeometry to add text to our scene.

We’ll be using a FontLoader to load the font necessary to display our text. We have to provide our font options and text to TextGeometry. We’ll add the mesh to our scene.

Moving our planets

Now we have to rotate the planets around us. Let’s add the following code in our animate() function.

The position of textMesh needs to be updated so that they move along with the planet. A slight offset is given to the position of the text so that they don’t overlap with the planet.

Create your version of solar system in VR. Share a link to your creation in the comments below.