That's no moon - it's an Aframe VR moon

For a session (8th November 2019) at a local school's, Northampton International Academy, Code Code; we built, using Mozzila's brilliant AFrame, a web-based Virtual Reality model of a planet with rings and include a moon with the school's logo on it. This post replicates the steps to build something similar.


The code is included at the end of the post.

The example made at NIA's Code Club - November 2019

Step 1. Basic Planet
The first step is to set a new site in Glitch.com  and then add a white sphere on a black background.

Using the Aframe 'tags' to create a white sphere and to create a black background (see above or the code at the end of the post).


Step 2: Rotate the planet and add some colour
Now we can add a surface to the planet by finding an appropriate image to wrap around the sphere. in this example, I used the site Solar Systems Scope (https://www.solarsystemscope.com/textures/) and downloaded an image of Jupiter's surface (https://www.solarsystemscope.com/textures/download/2k_jupiter.jpg). This needs to be copied into the assets folder of the project and the URL generated (by left-clicking on the image when it is in the folder) copied. Now by adding src="" and in the speech-marks paste in the URL for the image; the image wraps around the sphere.

Now to rotate it  add, also within the , section animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" (see above or the code at the end of the post for more details).

Step 3: Adding ring
In Aframe if you nest another object with the <></> of another object it's position is set relative the first object. This principle is going to be used here put a ring around the planet. First stage is add the ring object is used for this and a the same rotating animation is used. If you wish you could add an image onto the rings. See below or the code at the end of the post for more details. 

Step 4: Adding a moon
The process is really just combining elements of the steps 1-3. Create a new sphere,set the radius to something around 0.25 to 0.5; colour it with whatever you feel is appropriate, add an image if you want, set a rotation (it is is fun to play with these a bit and place the moon on the ring (setting position="5 0 0" in this case does this.

The whole code is here.


The video shows it action:


You can use trinket as well if there are concerns about students creating web content. If the images are accessible as web sources this could be a great option.

All views and opinions are the author's and do not necessarily reflected those of any organisation they are associated with. Twitter: @scottturneruon