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>Glide demo</title>
    <meta name="description" content="Glide demo">
    <script src="https://aframe.io/releases/0.3.1/aframe.js"></script>
  </head>
  <body>
    <a-scene>
  </a-entity>    
    <a-entity position="0 1.8 4" camera id="camera" look-controls="enabled: true">
      <a-cursor color="white"></a-cursor>
      <a-animation attribute="position" begin="glide" to="0 -2 -2"></a-animation>
    </a-entity>    
    
    
    <a-sky color="lightpink"></a-sky>
   
    <a-box id="red" position="-2 0 -5" material="transparent: true; opacity: 0.1; color:red;"></a-box>
    <a-box id="yellow" position="2 0 -5" material="transparent: true; opacity: 0.1; color:yellow;"></a-box>
    
    <a-box id="blue" position="0 2 -5" material="transparent: true; opacity: 0.1; color:blue;"></a-box>
    <a-box id="green" position="0 -2 -5" material="transparent: true; opacity: 0.1; color:green;"></a-box>
​
    </a-scene>
        
    <script>
      var slided = false;
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }
​
      // shake pair
      function run () {
        var green = document.getElementById('green');
        var camera = document.getElementById('camera');
        green.addEventListener('mouseenter', function() {          
            if (!slided){
              slided = true;
              document.getElementById('camera').emit('glide');
            }
        });
​
      }
      
    </script>
​
  </body>
</html>
​
 
​
Output 300px

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

Dismiss x
public
Bin info
Utopiahpro
0viewers