<!DOCTYPE html>
<html>
  <head>
    <title>Lights - 01</title>
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img
          id="earth"
          crossorigin="anonymous"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fworld.topo.bathy.200401.3x5400x2700.jpg?v=1589575214788"
        />
        <img
          id="moon"
          crossorigin="anonymous"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fmoon_1024.jpg?v=1589191213564"
        />
      </a-assets>

      <a-sky color="lightblue"></a-sky>

      <a-sphere position="0 1.6 -5" radius="1.25" src="#earth"></a-sphere>

      <a-sphere position="2 1.6 -5" radius="0.25" src="#moon"></a-sphere>

      <a-box position="-2 1.6 -5" color="blue"></a-box>

      <a-cylinder position="-4 0.8 -5" height="1.6" radius="0.5"></a-cylinder>

      <a-tetrahedron position="-6 1.6 -5" color="#85144b"></a-tetrahedron>

      <!-- ground -->
      <a-plane
        position="0 0 -4"
        rotation="-90 0 0"
        width="40"
        height="40"
        color="#d0d0d0"
      ></a-plane>

      <!-- ceiling -->
      <a-plane
        position="0 5 0"
        rotation="90 0 0"
        width="40"
        height="40"
        color="white"
      ></a-plane>

      <!-- lights -->
      <a-light
        id="hemispherelight"
        position="0 2 0"
        type="hemisphere"
        color="white"
        ground-color="red"
        intensity="1"
      ></a-light>
    </a-scene>
  </body>
</html>