topical media & game development

talk show tell print

mobile-query-three-plugins-headtrackr-examples-demo.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <body><div id="info">
          Example of tQuery.headtrackr plugin -
          <a href='github.com/mrdoob/three.js/' target='_blank'>three.js</a> +
          <a href='http://jeromeetienne.github.com/tquery/' target='_blank'>tQuery API</a> for 3D /
          <a href='github.com/auduno/headtrackr' target='_blank'>headtrackr.js</a> for headtracking
          <br/> press [space] to reset head tracking
  </div><script>
  require(['tquery.skymap', 'tquery.lensflare', 'tquery.headtrackr'], function(){
          var world        = tQuery.createWorld().boilerplate().pageTitle('#info').start();
  
          // tune initial camera position
          var cameraZ        = 2;
          world.removeCameraControls();
          world.tCamera().position.z        = cameraZ;
          
          // add a skymap
          var skymap        = tQuery.createSkymap('skybox').addTo(world);
  
          // add some lensflare
          tQuery.createLensFlare().addTo(world).position(+1.4, 1, -3);
          tQuery.createLensFlare().addTo(world).position(-1.4, 1, -3);
          
          // load the head of walt
          var loader        = new THREE.BinaryLoader( true );
          loader.load("../../../plugins/assets/obj/walt/WaltHead_bin.js", function(tGeometry){
                  // normalize the geometry
                  var geometry        = tQuery(tGeometry).computeAll().normalize().computeAll();
                  // create the material
                  var cubeTexture        = tQuery.createCubeTexture('skybox');
                  var material        = tQuery.createMeshBasicMaterial().envMap(cubeTexture).color(0xcccccc);
                  // add all the heads
                  var object3D        = tQuery(geometry, material).addTo(world)
                  for(var i = 0; i < 5; i++){
                          object3D.clone().addTo(world).positionX( i * 0.4).positionZ(-i * 0.5)
                          object3D.clone().addTo(world).positionX(-i * 0.4).positionZ(-i * 0.5)
                  }
          });
  
          // create the headTracker
          var headTracker        = tQuery.createHeadtrackr({
                  headtrackrOpts        : {
                          calcAngles        : false
                  }
          }).debugView(true).start();
  
          // make the camera move depending on facetrackingEvent
          headTracker.addEventListener("found", function(event){
                  // set the position of the camera
                  var angleY        = Math.PI/3 * event.x + Math.PI/2;
                  world.tCamera().position.x        = Math.cos(angleY)*cameraZ;
                  world.tCamera().position.z        = Math.sin(angleY)*cameraZ;
                  // update the target
                  world.tCamera().lookAt(world.tScene().position);
          });
  
          // reset headTracker if space is pressed
          document.addEventListener('keydown', function(event){
                  // only if the key is space
                  if( event.keyCode !== ' '.charCodeAt(0) )        return;
                  // reset the head tracker
                  headTracker.reset();
          });
  });
  </script></body>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.