<!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"
shadow="cast: true"
></a-sphere>
<a-sphere
id="moon"
position="2 1.6 -5"
radius="0.25"
src="#moonPhoto"
shadow="cast: true"
></a-sphere>
<a-box position="-4 2 -4" color="blue" shadow="cast: true;"></a-box>
<a-cylinder
position="-4 0.8 -5"
height="1.6"
radius="0.5"
shadow="cast: true;receive:true"
></a-cylinder>
<a-tetrahedron position="-6 1.6 -5" color="#85144b"></a-tetrahedron>
<a-plane
id="ground"
position="0 0 -4"
rotation="-90 0 0"
width="40"
height="40"
color="#d0d0d0"
shadow="receive: true"
></a-plane>
<a-plane
position="0 5 0"
rotation="90 0 0"
width="40"
height="40"
color="white"
></a-plane>
<a-light id="ambientLight" type="ambient" color="#BBB"></a-light>
<a-light
id="directionalLight"
type="directional"
color="#FFF"
position="0.05776 1.60862 1"
light="castShadow: true; shadowCameraTop: 6.39; shadowCameraRight: 2.56; shadowCameraBottom: 3.54; shadowCameraLeft: -4.55; "
></a-light>
</a-scene>
</body>
</html>