tQuery - headtrackr

head tracking + webgl

by Reusablecode

HTML

<!doctype html><script src="http://jeromeetienne.github.com/tquery/build/tquery-bundle-require.js"></script>
<script>
// trick to get cors on github content
requirejs.config({ baseUrl : "http://www.corsproxy.com/jeromeetienne.github.com/tquery/plugins/requirejs/examples/" });
</script>
<body></body>

JavaScript

require(['tquery.headtrackr'], function(){
    // init the world
    var world    = tQuery.createWorld().boilerplate().start();
    world.removeCameraControls();
    
    // create the headTracker
    var headTracker    = tQuery.createHeadtrackr().start();
    headTracker.debugView(true);
                            

    // add a cube in the world scene
    var object    = tQuery.createCube().addTo(world);
    // make the camera move depending on facetrackingEvent
    headTracker.addEventListener("found", function(event){
        object.rotationZ(event.angle)
            .positionX(event.x).positionY(event.y)
            .scaleX(event.width).scaleY(event.height);
    });
});