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>Head movement yes/no demo</title>
    <meta name="description" content="Head movement yes/no demo">
    <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-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 color="lightpink"></a-sky>
    <a-entity position="-4 4 -4" id='shaked' text='text: Head shaked' material="color:black;" visible="false"></a-entity>
    <a-entity position="-4 5 -4" id='nodded' text='text: Head nodded' material="color:black;" visible="false"></a-entity>
​
   
    <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>
      /*
       PROBLEMS
         cant follow the camera
           still works for example to answer to an NPC question
         occlude other objects
           can be made invisible once the target interaction is done
       TODO
         use meaningful pairs rather than colors
         emit an event rather console debugging
      */
      var delay = 5000;
      // adjust how fast the movement should be
      
      var last_blue = false;
      var last_green = false;
      
      var last_red = false;
      var last_yellow = false;
      
      var shaked_counter = 0;
      var nodded_counter = 0;
      
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }
​
      // shake pair
      function run () {
        var shaked = document.getElementById('shaked');
        var nodded = document.getElementById('nodded');
        
        
        var red = document.getElementById('red');
        red.addEventListener('mouseenter', function() {
          last_red = Date.now();
          if (last_yellow){
             if (Math.abs(last_red-last_yellow)<delay){
               console.log('head shaked latteraly');
               shaked.setAttribute("visible","true");
               shaked_counter++;
               shaked.setAttribute("text","text: Head shaked "+shaked_counter);
             }
          }
        });
        var yellow = document.getElementById('yellow');
        yellow.addEventListener('mouseenter', function() {
           last_yellow = Date.now();
          if (last_red){
             if (Math.abs(last_red-last_yellow)<delay){
               console.log('head shaked latteraly');
               shaked.setAttribute("visible","true");
               shaked_counter++;
               shaked.setAttribute("text","text: Head shaked "+shaked_counter);
             }
          }
        });
                  
        // nod pair
        var blue = document.getElementById('blue');
        blue.addEventListener('mouseenter', function() {
          last_blue = Date.now();
          if (last_yellow){
             if (Math.abs(last_blue-last_yellow)<delay){
               console.log('head nodded vertically');
               nodded.setAttribute("visible","true");
               nodded_counter++;
               nodded.setAttribute("text","text: Head nodded"+nodded_counter);
             }
          }
        });
        var green = document.getElementById('green');
        green.addEventListener('mouseenter', function() {
           last_green = Date.now();
          if (last_blue){
             if (Math.abs(last_blue-last_green)<delay){
               console.log('head nodded vertically');
               nodded.setAttribute("visible","true");
               nodded_counter++;
               nodded.setAttribute("text","text: Head nodded"+nodded_counter);
             }
          }
        });
​
      }
      
    </script>
​
  </body>
</html>
​
Output

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

Dismiss x
public
Bin info
Utopiahpro
0viewers