Skip to content

Commit

Permalink
leap integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@szaman19
szaman19 committed Sep 25, 2016
1 parent ac75e12 commit b3bf698
Show file tree
Hide file tree
Showing 72 changed files with 172,015 additions and 7,597 deletions.
287 changes: 49 additions & 238 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,244 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<title>Leap VR Quickstart</title>
<meta charset="utf-8">
<style>
body {
font-family: Monospace;
margin: 0px;
padding: 0;
}
</style>

<!--<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script> todo-->
<script src="js/three.js"></script>
<!-- These two scripts are brought in from the THREE.js repo -->
<script src="js/VRControls.js"></script>
<script src="js/VREffect.js"></script>

<script src="node_modules/leapjs/leap-0.6.4.min.js"></script>
<script src="js/leap-plugins-0.1.11pre.js"></script>
</head>

<body>

<canvas id="scene"></canvas>

<p>
Notes on this example
</p>
<ul>
<li> Units are in meters. </li>
<li> It is a really really good idea to set up 60Hz refresh rate. </li>
<li> The positional tracker light will blink once when plugged in to indicate readyness, and be on consistently when tracking. </li>
</ul>

</body>

<script>
// Including this in the footer so that the bone hand plugin can create its canvas on the body
//
// CREATE THE SCENE
//
//
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
10000
);
var canvas = document.getElementById('scene');
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;
var renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
});
renderer.setSize(window.innerWidth, window.innerHeight);
onResize = function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
};
window.addEventListener('resize', onResize, false);
var light = new THREE.PointLight(0xffffff, 1, 1000);
scene.add(light);
axisHelper = new THREE.AxisHelper(0.060);
axisHelper.position.set(0,-0.03,-0.30);
scene.add(axisHelper);
//
// ADD CUBES (blah blah)
//
//
var cubeGeo = new THREE.BoxGeometry(0.032, 0.032, 0.032);
var cubeMesh = new THREE.MeshPhongMaterial({color: 0x00cc00});
// forwards
var cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.06,-0.03,-0.3);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.06,-0.03,-0.3);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.06,-0.03,-0.42);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.06,-0.03,-0.42);
scene.add(cube);
// right
cubeMesh = new THREE.MeshPhongMaterial({color: 0x0000cc});
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.3,-0.03,-0.06);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.3,-0.03,0.06);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.42,-0.03,-0.06);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.42,-0.03,0.06);
scene.add(cube);
// left
cubeMesh = new THREE.MeshPhongMaterial({color: 0xcc0000});
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.3,-0.03,-0.06);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.3,-0.03,0.06);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.42,-0.03,-0.06);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.42,-0.03,0.06);
scene.add(cube);
// back
cubeMesh = new THREE.MeshPhongMaterial({color: 0xcccc00});
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.06,-0.03,0.3);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.06,-0.03,0.3);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(-0.06,-0.03,0.42);
scene.add(cube);
cube = new THREE.Mesh(cubeGeo, cubeMesh);
cube.position.set(0.06,-0.03,0.42);
scene.add(cube);
//
// ADD LEAP MOTION
//
//
// Connect to localhost and start getting frames
Leap.loop();
// Docs: http://leapmotion.github.io/leapjs-plugins/main/transform/
Leap.loopController.use('transform', {
// This matrix flips the x, y, and z axis, scales to meters, and offsets the hands by -8cm.
vr: true,
// This causes the camera's matrix transforms (position, rotation, scale) to be applied to the hands themselves
// The parent of the bones remain the scene, allowing the data to remain in easy-to-work-with world space.
// (As the hands will usually interact with multiple objects in the scene.)
effectiveParent: camera
});
// Docs: http://leapmotion.github.io/leapjs-plugins/main/bone-hand/
Leap.loopController.use('boneHand', {
// If you already have a scene or want to create it yourself, you can pass it in here
// Alternatively, you can pass it in whenever you want by doing
// Leap.loopController.plugins.boneHand.scene = myScene.
scene: scene,
// Display the arm
arm: true
});
//
// ADD VIRTUAL REALITY
//
//
// Moves (translates and rotates) the camera
var vrControls = new THREE.VRControls(camera, function(message){
console.log(message);
});
var vrEffect = new THREE.VREffect(renderer, function(message){
console.log(message);
});
var onkey = function(event) {
if (event.key === 'z' || event.keyCode === 122) {
vrControls.zeroSensor();
}
if (event.key === 'f' || event.keyCode === 102) {
console.log('f');
return vrEffect.setFullScreen(true);
}
};
window.addEventListener("keypress", onkey, true);
//
// MAKE IT GO
//
//
var render = function() {
vrControls.update();
vrEffect.render(scene, camera);
requestAnimationFrame(render);
};
render();
//
// Add a debug message Real quick
// Prints out when receiving oculus data.
//
//
var receivingPositionalData = false;
var receivingOrientationData = false;
var timerID = setInterval(function(){
if (camera.position.x !== 0 && !receivingPositionalData){
receivingPositionalData = true;
console.log("receiving positional data");
}
if (camera.quaternion.x !== 0 && !receivingOrientationData){
receivingOrientationData = true;
console.log("receiving orientation data");
}
if (receivingOrientationData && receivingPositionalData){
clearInterval(timerID);
}
}, 2000);
</script>
<!DOCTYPE html>
<!--
/------------------------------------------------------------------------------\
| Copyright (C) 2012-2013 Leap Motion, Inc. All rights reserved. |
| Leap Motion proprietary and confidential. Not for distribution. |
| Use subject to the terms of the Leap Motion SDK Agreement available at |
| https://developer.leapmotion.com/sdk_agreement, or another agreement |
| between Leap Motion and you, your company or other organization. |
\------------------------------------------------------------------------------/
-->

<!--
See additional libraries, guides, and examples at:
- https://developer.leapmotion.com/downloads/javascript
- https://developer.leapmotion.com/getting-started/javascript
- https://developer.leapmotion.com/gallery/tags/javascript
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Leap Motion JavaScript Sample</title>
<script src="http://js.leapmotion.com/leap-0.6.4.min.js"></script>

</head>
<body>
<h1>Leap Motion JavaScript Sample</h1>
<div id="main">
<button id="pause" onclick="togglePause()">Pause</button>
<input type="checkbox" id="pauseOnGesture" onclick="pauseForGestures()">Pause on gesture</input>
<!-- <h3>Frame data:</h3>
<div id="frameData"></div>
<div style="clear:both;"></div>
<h3>Hand data:</h3>
<div id="handData"></div>
<div style="clear:both;"></div>
<h3>Finger and tool data:</h3>
<div id="pointableData"></div> -->
<div style="clear:both;"></div>
<h3>Gesture data:</h3>
<ul id="gestureData"></ul>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>











</script>
<script src="leapController.js"></script>
</body>

<!-- <!DOCTYPE html> -->
<!-- <html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1> -->
<!-- All of the Node.js APIs are available in this renderer process. -->
<!-- We are using node <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body> -->

<!-- <script> -->
<!-- // You can also require other files to run in this process
require('./renderer.js')
</script> -->
<!-- </html> -->
</html>
Loading

0 comments on commit b3bf698

Please sign in to comment.