[WebGL] Leap Motion 1

이번 예제는 Leap Motion Controller를 이용한 오브젝트 컨트롤에 관한 것이다. 아쉽게도 현재 필자는 개발 당시에는 Leap Motion Controller를 가지고 있었으나, 현재는 보유하고 있지 않아 본 테스트 프로젝트가 제대로 작동하는지 검증을 할 수 없는 상태이다.

다만, 개발 당시에는 본 테스트 프로젝트가 정상 작동하였었기 때문에 일단 올려본다. Leap Motion Controller를 가지고 계신 분은 테스트 해 보시기 바란다.

[Download Project]

11-01-leap-motion-1.zip

FULL SCREEN

[main.js]

// standard global variables
var container, scene, camera, renderer;
var keyboard = new THREEx.KeyboardState();

// custom global variables
var fingers = {};
var spheres = {};

init();
animate();

// FUNCTIONS
function init(){
	// SCENE
	scene = new THREE.Scene();

	// CAMERA
	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 10000;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	camera.position.set(0,200,400);	
	camera.position.z = 500;
	camera.position.y = 200;
	camera.lookAt(new THREE.Vector3(0,200,0));
	scene.add(camera);

	// RENDERER
	if ( Detector.webgl )
		renderer = new THREE.WebGLRenderer( {antialias:true} );
	else
		renderer = new THREE.CanvasRenderer();
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById( 'ThreeJS' );
	container.appendChild( renderer.domElement );

	// EVENTS
	THREEx.WindowResize(renderer, camera);
	THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) });

	// STATS

	// CONTROLS

	// LIGHT
	var light = new THREE.PointLight(0xffffff);
	light.position.set(0,500,500);
	scene.add(light);

	// FLOOR

	// SKYBOX

	////////////
	// CUSTOM //
	////////////
	
}

// the LeapMotion update function
Leap.loop( {enableGestures: true}, function( frame ) {
	var fingerIds = {};
	var handIds = {};

	console.log(frame.pointable.length);

	for (var index = 0; index < frame.pointables.length; index++) {
		var pointable = frame.pointables[index];
		var finger = fingers[pointable.id];

		var pos = pointable.tipPosition;
		var dir = pointable.direction;

		var origin = new THREE.Vector3(pos[0], pos[1], pos[2]);
		var direction = new THREE.Vector3(dir[0], dir[1], dir[2]);

		if (!finger) {
			finger = new THREE.ArrowHelper(origin, direction, 100, Math.random() * 0xffffff);
			fingers[pointable.id] = finger;
			scene.add(finger);
		}

		finger.position = origin;
		finger.setDirection(direction);

		fingerIds[pointable.id] = true;
	}

	for (fingerId in fingers) {
		if (!fingerIds[fingerId]) {
			scene.remove(fingers[fingerId]);
			delete fingers[fingerId];
		}
	}

	// gesture debugging
	var n = frame.gestures.length;
	if (n > 0) 
	{
		for (var i = 0; i < n; i++)
		{
			console.log( frame.gestures[i] );
		}
	}
});
// end of LeapMotion update

function animate()
{
    requestAnimationFrame( animate );
	render();
	update();
}

function update()
{
	if ( keyboard.pressed("z") )
	{
		// do something
	}
}

function render()
{
	renderer.render( scene, camera );
}