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.
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.
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
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> | |
| </head> | |
| <body> | |
| <a-scene> | |
| <a-sphere position="0 1.25 -5" radius="3" color="white" | |
| src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376" | |
| animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"> | |
| <a-torus position="0 0 0" | |
| arc="360" | |
| rotation="90 0 0" | |
| color="white" radius="5" | |
| radius-tubular="0.05" | |
| animation="property: rotation; to: 90 0 0; loop: true; dur: 3000"> | |
| </a-torus> | |
| <a-sphere position="5 0 0" | |
| rotation="0 0 0" | |
| radius="0.5" | |
| color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360" | |
| animation="property: rotation; to: 0 259 0; loop: true; dur: 3000"> | |
| </a-sphere> | |
| </a-sphere> | |
| <a-sky color="black"></a-sky> | |
| </a-scene> | |
| </body> | |
| </html> |
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
No comments:
Post a Comment