VR Knowledge Map

<!doctype html>
<html>
  <head>
    <title>VR Knowledge Map</title>
    <meta name="description" content="VR Knowledge Map">
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-v0.2.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ngokevin/aframe-text-component/dist/aframe-text-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
  Lesson1Position_Code      
      </a-assets>
      
    <a-entity position="0 1.8 4" camera id="camera" look-controls wasd-controls>
      <a-cursor color="white"></a-cursor>
    </a-entity>
     
    <a-entity id="textid" text="text: VR knowledge map"position="-5 0 -5" material="color: white" scale="2">
      </a-entity>
      
    <a-sky id=background src="" color="lightblue" cross-origin=""></a-sky>
      
    <a-plane position="0 2 3" color="#dbd7d7" visible="false" id="loadingPlane">
      <a-animation begin="firstanimation" attribute="scale" to="0 0 0" dur="3000"></a-animation>
    </a-plane>
    
    <a-plane rotation="-90 0 0" position="0 -1 0" scale="20 20 20"></a-plane>
      
      <a-entity id="Lesson1Position" class="Day1" position="-5 0 2">
        <a-entity id="savetext" text="text: Save" position="-2.5 0 0" material="color: black" scale="0.5 0.5 0.5"></a-entity>
        <a-entity id="Lesson1Position_Title" text="text: Lesson1: Position" rotation="-90 0 0" position="0 -0.9 0" material="color: black"></a-entity>
        <a-cube color="red" position="0 0 0"></a-cube>
        <a-entity id="Lesson1Position_Code" text='text: <a-cube color="red" position="0 0 0">' rotation="-90 0 0" position="0 -0.9 -1" material="color: grey"></a-entity>
      <a-cube rotation="0 0 0" position="4 0.1 -3" scale="6 2 1" color="lightgrey"></a-cube>
      <a-plane rotation="-90 0 0" position="-1 -0.9 -4" scale="1 6 1" color="orange"></a-plane>
      </a-entity>
      
      <a-entity id="Lesson2Color" class="Day1" position="-5 0 -4">
        <a-entity id="Lesson2Color_Title" text="text: Lesson2: Color" rotation="-90 0 0" position="0 -0.9 -1" material="color: black"></a-entity>
        <a-cube color="green" position="0 0 0"></a-cube>
        <a-entity id="Lesson1Position_Code" text='text: <a-cube color="green" position="0 0 0">' rotation="-90 0 0" position="0 -0.9 0" material="color: grey"></a-entity>
      <a-cube rotation="0 0 0" position="4 0.1 -3" scale="6 2 1" color="lightgrey"></a-cube>
      <a-plane rotation="-90 0 0" position="-1 -0.9 -4" scale="1 6 1" color="orange"></a-plane>
      </a-entity>
    
    </a-scene>
 
    <script>
      
      /* TODO
          catch URL pameters and position camera accordingly
          simplify the default building block room
      */
      var lessons = {
        "Lesson1Position" : {position:"-5 0 2"},
        "Lesson2Color" : {position:"-5 0 -4"},
      };
      
      // check if URL parameters, if so, position the camera in front of the appropriate lesson
      var QueryString = function () {
        // This function is anonymous, is executed immediately and 
        // the return value is assigned to QueryString!
        var query_string = {};
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
              // If first entry with this name
          if (typeof query_string[pair[0]] === "undefined") {
            query_string[pair[0]] = decodeURIComponent(pair[1]);
              // If second entry with this name
          } else if (typeof query_string[pair[0]] === "string") {
            var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
            query_string[pair[0]] = arr;
              // If third or later entry with this name
          } else {
            query_string[pair[0]].push(decodeURIComponent(pair[1]));
          }
        } 
        return query_string;
      }();

if(QueryString.TargetLesson){
        if(lessons[QueryString.TargetLesson]){
          TargetLessonPosition = lessons[QueryString.TargetLesson].position;
        }
      }
      
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }
      function run () {
        
        if(TargetLessonPosition){
          var camera = document.querySelector('#camera');
          camera.setAttribute('position',TargetLessonPosition);
        }
          
        var item = document.querySelector('#savetext');
        item.addEventListener('mouseenter', function() {
             var learnedcode = encodeURIComponent('{a-box color="yellow" position='+document.getElementById('Lesson1Position_Code').getAttribute('text').text+'"}{/a-box}');
             window.open('mailto:fabien-services@benetou.fr?subject=VC Inception School - Room1&body=continue https://output.jsbin.com/dibonoj code, you learned '+learnedcode+' (for safety reason the inferior/superior signs were replaced by {/}) and personalize using your own code and lessons you learned https://jsbin.com/dibonoj/edit?html,output',"_self");
        });
      }
      
    </script>
  </body>
</html>

Updated missing url https://rawgit.com/aframevr/aframe/master/dist/aframe-v0.2.0.min.js to https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-v0.2.0.min.js

Updated missing url https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js to https://cdn.jsdelivr.net/gh/ngokevin/aframe-text-component/dist/aframe-text-component.min.js

https://rawgit.com/aframevr/aframe/master/dist/aframe-v0.2.0.min.js

https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js