topical media & game development
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.