Create VR Solar System With a-Frame
A-FRAME is popular open-source web framework for building virtual reality experiences in browser. It is very super easy to get started as its based on top of HTML, as in this world of programming html is know by most of the peoples.
a-frame just doesn’t produce a static 3D content, as it is powerful entity component framework which can be programmed by three.js a javascript library(used to render 3D graphics).
In this blog we will create solar system using basics of a-frame which is html.
Lets get started.
Note: While you can get started with A-Frame without previous coding experience, I recommend taking the time to Learn HTML to understand more about what’s going on under the hood.
Our solar system consists of our star, the Sun, and everything bound to it by gravity — the planets Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus and Neptune, dwarf planets such as Pluto, dozens of moons and millions of asteroids, comets, and meteoroids.
okay first thing lets create skeleton of the program
<html>
<head>
<!-- Header section -->
</head>
<body>
<!-- The Body -->
</body>
</html>yes that is your html , In <head> element add a <script> tag with ‘src’ attribute that points to the external script file through the ‘src’ source attribute.
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>In the <body> element, add an <a-scene> element. The <a-scene> element contains every entity and sets up a 3D scene in the browser. This is where we will be writing our A-Frame code.
In the <body> element, add the <a-scene> element with a background color.
<a-scene background=”color: midnightblue”>a-frame provides A-Frame primitives, such as <a-box>,<a-sphere>,<a-cylinder> are a wrapper of larger pieces of code that we can easily reuse in our program and the names are self-explanatory.
<!-- Sun -->
<a-sphere
color="#F5C85D"
position="-12 2 -15"
radius="3"></a-sphere>till now we created a skeleton of solar system and we still need to add textures and animations
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: midnightblue">
<!-- Sun -->
<a-sphere
color="#F5C85D"
position="-13 2 -10"
radius="4"></a-sphere><!-- Mercury -->
<a-sphere
color="#AF886D"
position="-7 2 -10"
radius=".25"></a-sphere><!-- Venus -->
<a-sphere
color="#ECBFBF"
position="-5 2 -10"
radius=".5"></a-sphere><!-- Earth -->
<a-sphere
color="#6DCBE7"
position="-3 2 -10"
radius=".5"></a-sphere><!-- Mars -->
<a-sphere
color="#CF503A"
position="-1 2 -10"
radius=".25"></a-sphere><!-- Jupiter -->
<a-sphere
color="#C9957A"
position="1 2 -10"
radius="1"></a-sphere>
<!-- Saturn -->
<a-sphere
color="#F8EC99"
position="4 2 -10"
radius=".8"></a-sphere><!-- Uranus -->
<a-sphere
color="#73AAF8"
position="7 2 -10"
radius=".75"></a-sphere><!-- Neptune -->
<a-sphere
color="#3453BD"
position="10 2 -10"
radius=".75"></a-sphere></a-scene>
</body>
</html>
Let’s add some image textures for our planets!
Add an <a-assets> element in <a-scene> to use A-Frame’s asset management system.
A-frame has an asset management system that makes complex environments with multiple parts load faster. The system makes it easier for the browser to cache assets and A-Frame will make sure all of the assets are fetched before rendering.
To utilize the asset management system, all we need is an <a-assets> element around every HTML element we want to include in the asset management system.
if you want to add sun from assets management system in a scene then add like this
<a-assets><img id=”sun” src=”sun.jpg”> </a-assets>Now if u want to use it in <a-sphere> you can Delete the color component of each of your <a-sphere> planets and add a src of the image texture id. Remember to add the # before the id name.
<a-sphere
src="#sun"
position="-12 2 -15"
radius="3"
></a-sphere>Let’s add sky background. The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture mapped to the inside.
<!-- a-sky -->
<a-sky src="#space"></a-sky>We can change how the scene is lit by using the <a-light> primitive
<a-light
type="point"
intensity="2"
position="2 4 4"></a-light>Point lights are like light bulbs.
Almost all of the planets in our solar system rotate in a counter-clockwise motion. The two anomalies in question are Venus and Uranus. These planets rotate in the clockwise or retrograde direction. Use the animation component to add some rotational animation.
for example
<! — Earth →
<a-sphere
src=”#earth”
position=”-3 2 -15"
radius=”.5"
animation=”property: object3D.rotation.y;
to: 360;
dur: 10000;
loop: true”>this means
Animate the object position’s x-axis,
to means animate from original y axis to 360 degree
Set the dur (duration) to 10000 millisecond on each cycle.
Set the loop to true to repeat the animation forever.
so the final code you can check here
Live version is here ( great things takes time so let is load)