Leap Motion ~ hand.direction vs hand.palmNormal

by Theo Armour

HTML

<script src='http://js.leapmotion.com/0.2.0-beta6/leap.min.js'></script>
<script src='http://mrdoob.github.com/three.js/build/three.min.js'></script>
<script src='http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js'></script>
<script src='http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js'></script>

CSS

/*

Theo Armour ~ 2013-07-23 ~ MIT License

*/

JavaScript

var renderer, scene, camera, controls;

var infoLeft, interactionBoxLeft, palmLeft, deviceLeft;
var infoRight, interactionBoxRight, palmRight, deviceRight;

init();
animate();

function init() {
    var geometry, material, mesh, css;

    renderer = new THREE.WebGLRenderer({
        setClearColor: 0x000000,
        antialias: true
    }); // depends on lighting - can look awful...
    // renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, 250, 700);
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.target.set(0, 200, 0);

    stats = new Stats();
    stats.domElement.style.cssText = 'position: absolute; right: 0; top: 0px; zIndex: 100; ';
    document.body.appendChild(stats.domElement);

    css = document.body.appendChild(document.createElement('style'));
    css.innerHTML = 'body { font: 600 12pt monospace; margin: 0; overflow: hidden; }';

    var light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(1, 1, 1).normalize();
    scene.add(light);

    light = new THREE.DirectionalLight(0xffffff);
    light.position.set(-1, 1, -1).normalize();
    scene.add(light);

    axisHelper = new THREE.AxisHelper(500);
    scene.add(axisHelper);

    geometry = new THREE.CubeGeometry(700, 20, 300);
    // geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
    material = new THREE.MeshLambertMaterial({
        color: Math.random() * 0x888888
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.position.y = -10;
    scene.add(plane);

    // left
    infoLeft = document.body.appendChild(document.createElement('div'));
    infoLeft.style.cssText = 'position: absolute; left: 0; top: 0; width: 25% ';
    infoLeft.innerHTML = '<h2>Left:...