<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Lights 08 - Environment map</title>
  <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras/dist/aframe-extras.min.js"></script>
</head>

<body>
  <a-scene>

    <a-assets>
      <!-- Helmet 3D model from https://github.com/KhronosGroup/glTF-Sample-Models/tree/main -->
      <a-asset-item id="helmet" src="https://cdn.glitch.global/80978ab7-9db6-45ae-bc43-4fab16bdbb6e/DamagedHelmet.glb?v=1749109214357"></a-asset-item>
      <img id="skyTexture" src="https://cdn.glitch.global/80978ab7-9db6-45ae-bc43-4fab16bdbb6e/golden_gate_hills_4k%20(1).jpg?v=1749108694699">

    </a-assets>

    <a-sky src="#skyTexture"></a-sky>

    <!-- Sphere with reflection. Different material properties-->

    <a-sphere position="-4 1 -2" radius="0.5" cube-env-map="path: https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/refs/heads/master/golden_gate_hills_4k/
/; extension: png; reflectivity: 1 ;">
    </a-sphere>
    <a-sphere position="-3 1 -2" radius="0.5" material="metalness:1; roughness:0" cube-env-map="path: https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/refs/heads/master/golden_gate_hills_4k/
/; extension: png; reflectivity: 1 ;">
    </a-sphere>
    <a-sphere position="-2 1 -2" radius="0.5" material=" metalness:0.75; roughness:0" cube-env-map="path: https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/refs/heads/master/golden_gate_hills_4k/
/; extension: png; reflectivity: 1;">
    </a-sphere>
    <a-sphere position="-1 1 -2" radius="0.5" material=" metalness:0.75; roughness:0.3" cube-env-map="path: https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/refs/heads/master/golden_gate_hills_4k/
/; extension: png; reflectivity: 1 ;">
    </a-sphere>


  <!-- 3D model with env map applied -->
    <a-gltf-model src="#helmet" cube-env-map="path: https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/refs/heads/master/golden_gate_hills_4k/
/; extension: png; reflectivity: 1 ;" position="1 1 -2"></a-gltf-model>

  </a-scene>

</body>

</html>