<!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>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="40"
height="40"
color="#d0d0d0"
></a-plane>
<a-plane
position="0 5 0"
rotation="90 0 0"
width="40"
height="40"
color="white"
></a-plane>
<a-light
id="directionalLight"
type="directional"
color="#FFF"
intensity="0.6"
position="-0.5 1 1"
></a-light>
</a-scene>
</body>
</html>