<html>

<head>
  <!--   aframe base -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
  <!--   event set component -->
  <script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
  <!--   aframe addons and components -->
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  <!--   aframe physics -->
  <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
  <!--   aframe proxy event -->
  <script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>

</head>

<body>

  <a-scene stats physics="debug: false">

    <a-assets>
      <!--   models -->
      <a-asset-item id="courtyard" src="https://assets.codepen.io/2643010/courtyard-lightmapped.glb" crossorigin='anonymous'></a-asset-item>
      <audio id="firecrackle" src="https://assets.codepen.io/2643010/ftus-FireCrackle.mp3" preload="auto" crossorigin='anonymous'></audio>
      <!-- images -->
      <img id="intro" src="https://assets.codepen.io/2643010/XR-gallery-intro.svg" alt="intro" crossorigin="anonymous">
      <img id="sky" src="https://assets.codepen.io/2643010/kiara_1_dawn.jpg" crossorigin='anonymous' alt="skybox">
      <img id="grid-tile-black" src="https://assets.codepen.io/2643010/texture_07.png" crossorigin='anonymous' />
    </a-assets>

    <!--  movement - camera obj -->
    <a-entity movement-controls position="0 0 3">
      <!--     The Camera -->
      <a-entity camera look-controls position="0 1.6 0">

        <!--   the Cursor -->
        <a-cursor material="color: #ffffff;" raycaster="far: 20; objects: .clickable" animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1" animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1" animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1" cursor="fuse: true;"></a-cursor>

      </a-entity>

      <a-entity laser-controls="hand: left;" raycaster=" objects: .clickable; far: 15; lineColor: white; lineOpacity: 0.5"></a-entity>
      <a-entity laser-controls="hand: right;" raycaster=" objects: .clickable; far: 15; lineColor: white; lineOpacity: 0.5"></a-entity>

    </a-entity>

    <!--  Ground -->
    <a-plane position="0 -0.5 0" rotation="-90 0 0" width="100" height="100" color="#444444" material="src: #grid-tile-black; repeat: 50 50; roughness: 0.8;" shadow="receive: true; cast: false;"></a-plane>
    <a-box width="100" height="0.2" depth="100" position="0 0 0" static-body="shape: box;" material="visible: false;"></a-box>

    <!--  Sky -->
    <a-sky src="#sky" color="#fff"></a-sky>

    <!--  Light -->
    <a-entity light="type:point; castShadow:true; intensity: 0.8; distance: 10;" position="0 5 2" rotation="0 0 0" sound="src: #firecrackle; autoplay: true; loop: true; volume: 5;"></a-entity>
    <!--     <a-entity light="type:point; castShadow:true; intensity: 1; distance: 20; color: #fffefa" position="0 5 -5" rotation="0 0 0"></a-entity> -->

    <!--     <a-entity id="arch-light" light="type: point; intensity: 2; distance: 3; color: #ffffff" position="-5.6 3.4 -11" rotation=""></a-entity> -->
    <!--     <a-entity id="arch-light" light="type: point; intensity: 2; distance: 3; color: #ffffff" position="5.6 3.4 -11" rotation=""></a-entity> -->

    <a-entity light="type:ambient; intensity: 0.8; color: #ffffff" position="0 10 0;" rotation="0 0 0"></a-entity>

    <!--  intro-panel -->
    <a-image src="#intro" position="-2 1.6 -2" rotation="0 20 0" width="1" height="1" scale="1.25 1.25 1" shadow="receive: false; cast: false;"></a-image>

    <a-entity gltf-model="#courtyard" position="0 0.05 -3" rotation="0 0 0" scale="1 1 1" shadow="receive: true; cast: false;"></a-entity>

    <!--     mini-map-tower-model -->
    <a-box position="0 0.3 -3" rotation="0 0 0" width="2" height="0.1" depth="2" color="#73b354">

      <a-box position="0 1 0" rotation="0 25 0" width="0.5" height="2" depth="0.5" color="#bbbbbb"></a-box>

      <a-box position="0.05 0.35 0.1" rotation="0 27 0" width="0.6" height="0.7" depth="0.4" color="#dddddd"></a-box>
      <a-box position="-0.2 1.75 -0.1" rotation="0 23 0" width="0.35" height="1" depth="0.5" color="#777777"></a-box>

      <a-entity text="value: Art Gallery; align: left; width: 4; wrapCount: 40;" position="2.5 0.5 0.8" rotation="0 -20 0"></a-entity>
      <a-entity text="value: Rooftop Patio; align: left; width: 4; wrapCount: 40;" position="2.1 2.25 0.6" rotation="0 -20 0"></a-entity>
      <a-entity text="value: Coming Soon!; align: left; width: 4; wrapCount: 50;" position="2.1 2.05 0.6" rotation="0 -20 0"></a-entity>

      <a-entity text="value: Observatory; align: right; width: 4; wrapCount: 40;" position="-2.5 1.5 0.6" rotation="0 20 0"></a-entity>
      <a-entity text="value: Coming Soon!; align: right; width: 4; wrapCount: 50;" position="-2.5 1.3 0.6" rotation="0 20 0"></a-entity>

    </a-box>

    <!--   hello world text -->
    <a-entity text="value: The\nCourtyard;align: center;width: 4;wrapCount: 20;" position="0 3.25 -2"></a-entity>

  </a-scene>
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js