Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <head>
    <title>VR Inception School : Welcome</title>
    <meta name="description" content="An in-VR VR set of tutorials to discover VR programming, VR design guidelines and rapid prototyping by Fabien Benetou">
    <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-v0.2.0.min.js"></script>
    <script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
  </head>
  <body>
    <a-scene>
  // Entering with preview    
  <a-assets>
    <a-mixin id="metal" material="color: red; metalness: 0.2; opacity: 0.7; roughness: 0.3"></a-mixin>
  </a-assets>
  4     
  </a-entity>    
    <a-entity position="0 1.8 4" camera id="camera" look-controls="enabled: true">
      <a-cursor color="white"></a-cursor>
    </a-entity>
    <a-sky src="https://ucarecdn.com/ced1c34e-4c05-4c79-9a8a-3c78795583f1/zengarden.jpg" cross-origin=""></a-sky>
    
   <a-box color="black" id="" position="-1 5.5 -1" height="3" width="20" ></a-box>
    <a-entity text="text: VR Inception School" position="-8 5 0" material="color: white" scale="2.5"></a-entity>
 
    <a-entity position="0 -1 0" rotation="-20 0 0">
      
  <a-curvedimage id="preview" position="22 -2 8" src="" height="3.0" radius="5.7" theta-length="72" rotation="0 100 0" scale="5 5 5" cross-origin=""></a-curvedimage>
 
   <a-entity>
     <a-box color="red" id="VRSoftwareRoom1" position="0 2 -1" width="10" mixin="metal"></a-box>
     <a-entity text="text: VR Software Room 1" position="-2.5 1.5 0" material="color: black" scale=""></a-entity>
        <a-event name="mouseenter" scale="1.3 1.3 1.3"></a-event>
        <a-event name="mouseleave" scale="1 1 1"></a-event>
   </a-entity>
    <a-sphere id="EnterVRSoftwareRoom1" position="-4 2 0" radius="0.5" color="red"></a-sphere>
      
   <a-entity>
   <a-box color="orange" id="VRSoftwareRoom2" position="0 1 -1" width="10" mixin="metal"></a-box>
     <a-entity text="text: VR Software Room 2" position="-2.5 0.7 0" material="color: black" scale=""></a-entity>
        <a-event name="mouseenter" scale="1.3 1.3 1.3"></a-event>
        <a-event name="mouseleave" scale="1 1 1"></a-event>
   </a-entity>
    <a-sphere id="EnterVRSoftwareRoom2" position="-4 1 0" radius="0.5" color="orange"></a-sphere>
    
   <a-entity>
    <a-box color="yellow" id="VRHardwareRoom1" position="0 -0.5 -1" width="10" mixin="metal"></a-box>
     <a-entity text="text: VR Hardware Room 1" position="-2.5 -0.5 0" material="color: black" scale=""></a-entity>
        <a-event name="mouseenter" scale="1.3 1.3 1.3"></a-event>
        <a-event name="mouseleave" scale="1 1 1"></a-event>
   </a-entity>
    <a-sphere id="EnterVRHardwareRoom1" position="-4 -0.5 0" radius="0.5" color="yellow"></a-sphere>
    
   <a-entity>
    <a-box color="white" id="VRDesignRoom1" position="0 -2 -1" width="10" mixin="metal"></a-box>
     <a-entity text="text: VR Design Room 1" position="-2.5 -2 0" material="color: black" scale=""></a-entity>
        <a-event name="mouseenter" scale="1.3 1.3 1.3"></a-event>
        <a-event name="mouseleave" scale="1 1 1"></a-event>
   </a-entity>
    <a-sphere id="EnterVRDesignRoom1" position="-4 -2 0" radius="0.5" color="white"></a-sphere>
    
   <a-entity>
    <a-box color="grey" id="ARSoftwareRoom1" position="0 -3 -1" width="10" mixin="metal"></a-box>
     <a-entity text="text: AR Software Room 1" position="-2.5 -3 0" material="color: black" scale=""></a-entity>
        <a-event name="mouseenter" scale="1.3 1.3 1.3"></a-event>
        <a-event name="mouseleave" scale="1 1 1"></a-event>
   </a-entity>
    <a-sphere id="EnterARSoftwareRoom1" position="-4 -3 0" radius="0.5" color="grey"></a-sphere>
    
    
   </a-entity>
    
    </a-scene>
 
    
    <script>
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }
      function run () {
        
        var last_activated_room = false;
        
        var preview_vrsoftware1 = "https://ucarecdn.com/d3777cef-d203-4b4f-808a-6ce08559a5e7/20160528035659_1352x659_scrotpng.jpg";
        var preview_vrsoftware2 = "https://ucarecdn.com/2ff58324-6a45-4a5e-9e67-006c6cedb8a8/20160528035832_1356x664_scrotpng.jpg";
        var preview_vrhardware1 = "https://ucarecdn.com/ba869e51-246a-4c58-8064-347c301413b8/20160528035751_1360x662_scrotpng.jpg";
        var preview_missing = "https://ucarecdn.com/6ce11a7b-86aa-4b45-8bcb-ad8aedc5c146/20160528035727_1358x659_scrotpng.jpg";
      
        // Changing preview images
        var item = document.getElementById('VRSoftwareRoom1');
        item.addEventListener('mouseenter', function() {
             document.getElementById('preview').setAttribute('src', preview_vrsoftware1);
             last_activated_room = "https://output.jsbin.com/dibonoj";
        });
        var item = document.getElementById('VRSoftwareRoom2');
        item.addEventListener('mouseenter', function() {
             document.getElementById('preview').setAttribute('src', preview_vrsoftware2);
             last_activated_room = "https://output.jsbin.com/luheku";
        });
        var item = document.getElementById('VRHardwareRoom1');
        item.addEventListener('mouseenter', function() {
             document.getElementById('preview').setAttribute('src', preview_vrhardware1);
             last_activated_room = "https://output.jsbin.com/xemeva";
        });
        var item = document.getElementById('VRDesignRoom1');
        item.addEventListener('mouseenter', function() {
             document.getElementById('preview').setAttribute('src', preview_missing);
             last_activated_room = "https://output.jsbin.com/xipuxu";
        });
        var item = document.getElementById('ARSoftwareRoom1');
        item.addEventListener('mouseenter', function() {
             document.getElementById('preview').setAttribute('src', preview_missing);
             last_activated_room = "https://output.jsbin.com/xipuxu";
        });
        
        // Entering with preview
        var item = document.getElementById('preview');
        item.addEventListener('mouseenter', function() {
             if (last_activated_room){
               window.open(last_activated_room,"_self");
             }
        });
        
        // Enterring with spheres
        var item = document.getElementById('EnterVRSoftwareRoom1');
        item.addEventListener('mouseenter', function() {
             window.open("https://output.jsbin.com/dibonoj","_self");
        });
        var item = document.getElementById('EnterVRSoftwareRoom2');
        item.addEventListener('mouseenter', function() {
             window.open("https://output.jsbin.com/luheku","_self");
        });
        var item = document.getElementById('EnterVRHardwareRoom1');
        item.addEventListener('mouseenter', function() {
             window.open("https://output.jsbin.com/xemeva","_self");
        });
        var item = document.getElementById('EnterVRDesignRoom1');
        item.addEventListener('mouseenter', function() {
             window.open("https://output.jsbin.com/xipuxu","_self");
        });
        var item = document.getElementById('EnterARSoftwareRoom1');
        item.addEventListener('mouseenter', function() {
             window.open("https://output.jsbin.com/xipuxu","_self");
        });
        
      }
      
    </script>
  </body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Utopiahpro
0viewers