A-Frame Course - Source of /examples/0800-lights-06-spotlight.html

<!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="earthPhoto"
          crossorigin="anonymous"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fworld.topo.bathy.200401.3x5400x2700.jpg?v=1589575214788"
        />
        <img
          id="moonPhoto"
          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="#earthPhoto"></a-sphere>

      <a-sphere
        id="moon"
        position="2 1.6 -5"
        radius="0.25"
        src="#moonPhoto"
      ></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="spotlight"
        position="0 4 -5"
        rotation="-90 0 0"
        type="spot"
        color="white"
        intensity="1"
        decay="1"
        angle="20"
        penumbra="0.4"
      ></a-light>

      <a-light
        id="spotlighttargeted"
        position="2 4 -5"
        target="#moon"
        type="spot"
        color="yellow"
        intensity="1"
        decay="1"
        angle="10"
        penumbra="0.4"
      ></a-light>
    </a-scene>
  </body>
</html>