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>Live demo for CafeNBXL</title>
    <meta name="description" content="Live demo for the European Maker Fair et the EP">
    <script src="https://aframe.io/releases/0.3.1/aframe.js"></script>
    <script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
  </head>
  <body>
    <a-scene>
  <a-assets>
    <a-mixin id="metal" material="color: red; metalness: 0.2; opacity: 0.7; roughness: 0.3"></a-mixin>
      <a-asset-item id="tree-mtl" src="https://ucarecdn.com/5ca714c3-6ce5-471e-87b5-a57e8ef9bd26/"></a-asset-item>
  </a-assets>
      
    <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/b8a0b752-d377-4d2c-85de-a3ec67fa4c13/FGCK4416.jpg" cross-origin=""></a-sky>
      
   <a-box color="black" id="" position="-5 5 -5" height="3" width="20" rotation="0 45 0"></a-box>
    <a-entity text="text: VR @ CafeNumeriqueBXL"  rotation="0 45 0" position="-10 4 2" material="color: white" scale="2"></a-entity>
      
     
      <a-obj-model position="7 0 15" src="https://ucarecdn.com/d22245e0-5b7e-4e4f-84c4-a673b7b8e75c/" color="green"></a-obj-model>
      
      <a-entity position="3 0 0">
        <a-curvedimage id="preview" position="0 5 0" height="3.0" radius="4" theta-length="72" rotation="0 100 0" scale="5 5 5" cross-origin="" src="https://ucarecdn.com/ce2d00ca-8019-4933-ad8c-4e0f214d727e/cafenbruxelles.jpg" cross-origin="">
        <a-event name="mouseenter" position="0 3 0"></a-event>
        <a-event name="mouseleave" position="0 5 0"></a-event>
        </a-curvedimage>
        
        <a-curvedimage id="preview" position="-15 -5 -10" height="2" radius="2" theta-length="72" rotation="0 180 0" scale="5 5 5" cross-origin="" src="https://ucarecdn.com/b84c0c99-d0cb-4c5d-a657-0b7871846249/themuglogofreecoffee.jpg" cross-origin=""></a-curvedimage>
        
        
        <a-curvedimage id="preview" position="-25 0 -2" height="2" radius="2" theta-length="72" rotation="0 260 0" scale="5 5 5" cross-origin="" src="https://ucarecdn.com/61a8e05d-7000-4cc3-847d-e139df7e0f0a/bevr.jpg" cross-origin=""></a-curvedimage>
        
    <!--<a-sphere id="EnterARSoftwareRoom1" position="4 4 2" radius="0.5" color="grey"></a-sphere>
 -->     </a-entity>
      
      <a-sphere position="1 0 15"  id="bouncingsphere"  src="https://ucarecdn.com/b8a0b752-d377-4d2c-85de-a3ec67fa4c13/FGCK4416.jpg" cross-origin="">
  <a-animation attribute="position"
               dur="1000"
               fill="forwards"
               direction="alternate"
               to="1 10 15" 
               easin="bounce"
               repeat="indefinite">
        </a-sphere>
          
          <a-box position="4 0 15" color="gold" visible="false" id="multientrance"></a-box>
      <a-sphere position="0 50 4"  id="codeentrance"></a-sphere>
    </a-scene>
 
    
    <script>
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }
      function run () {
        
        
        // Entering with preview
        var item = document.getElementById('bouncingsphere');
        item.addEventListener('mouseenter', function() {
             //should show something next to it or "unlock" a chest that leads to a goodie : the code
              var secretentrance = document.getElementById('multientrance');
              secretentrance.setAttribute("visible","true");
          console.log('ok');
        });
        
        // Enterring with spheres
        var item = document.getElementById('codeentrance');
        item.addEventListener('mouseenter', function() {
             window.open("http://jsbin.com/boyefi/edit?html,output","_self");
        });
        
        // Enterring with spheres
        var item = document.getElementById('multientrance');
        item.addEventListener('mouseenter', function() {
             window.open("http://cafe.vrlab-brussels.info/multi/","_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