How to Create a Basic Scene

First, you have to input the a-frame script to so the web framework knows you'll be using a-frame.

In between the <head> </head> area, this is where we input information that does not need to be in the content of the site, such as which script we will be using.

<html>
  <head>
   
	 <script src="<https://aframe.io/releases/1.0.4/aframe.min.js>"></script>
 
 </head>
  <body>
    
  </body>
</html>

<aside> 💡 New A-frame 1.2.0 is out now with better AR/Quest functions but it’s no longer compatible with some of our other scripts in this class so we will stick to 1.0.4 for now but if you want to explore A-frame further use ➡️

</aside>

<script src="[<https://aframe.io/releases/1.2.0/aframe.min.js>](<https://aframe.io/releases/1.2.0/aframe.min.js>)"></script>

Basic components in a 3D scene: lighting, skybox, objects

Since lighting in A-frame scenes are automated, we can skip this for now and jump right to the sky + objects.

(You can learn more about the a-light component here)

Let's create the skybox!

Since the skybox <a-sky> is content we'd like to see in the scene, it goes inside <body>. But first, we have make <a-scene> before we add <a-sky>


  <body>
	  <a-scene>

		<a-sky color="#f2a595"></a-sky>
		sky
	</a-scene>
  </body>

Let's make planets!

We will be using A-frame primitives <a-sphere> to create a planet. We're still inputting under <a-scene> because our planets are in the scene. The radius is in metres.

<a-sphere position="2 35 2" color="#48afdf" radius="20"></a-sphere>

We can add planetary textures to our spheres to make them more realistic.

Assets can be uploaded in the asset menu on Glitch. Then you can link your your assets to <a-assets> so it can be used later. Give your asset an id nickname so you can source it later using a hashtag #nickname. Copy the link of the asset from Glitch to input in src.

<a-assets>
        <img
          id="planet-nancy"
          src="<https://cdn.glitch.com/e3e8b6be-c78b-425e-8c11-c0e56321452b%2Fjupitermap.jpg?v=1593714560340>"
          crossorigin="anonymous">
  </a-assets>