-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from leapmotion/transform
Add transform plugin and example
- Loading branch information
Showing
12 changed files
with
1,210 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Leap Transform Plugin</title> | ||
|
|
||
| <style> | ||
| body{ | ||
| margin: 0; | ||
| font-family: Helvetica; | ||
| } | ||
| canvas{ | ||
| pointer-events: none; | ||
| } | ||
| input{ | ||
| cursor: pointer; | ||
| } | ||
| #connect-leap{ | ||
| bottom: 0; | ||
| top: auto !important; | ||
| } | ||
| </style> | ||
|
|
||
|
|
||
| <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script> | ||
| <script src="//js.leapmotion.com/leap-0.6.2.js"></script> | ||
| <script src="../leap-plugins-0.1.6.1.js"></script> | ||
| <script src="leap.rigged-hand-0.1.5pre.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <h1>Transform Plugin</h1> | ||
| <p> | ||
| Transforms Leap data based off of a rotation matrix or a THREE.js rotation and vectors. | ||
| </p> | ||
| <p> | ||
| Here we use the riggedHand to visualize the transformations, but it is not required. All data in the frame is altered | ||
| by the transform plugin. | ||
| </p> | ||
| <p> | ||
| Parameters can be either static objects or methods which transform on every frame. | ||
| </p> | ||
| <p> | ||
| In this way, you can then transform individual hands based upon their id. | ||
| </p> | ||
|
|
||
| <br/> | ||
|
|
||
| <div style="float: left;"> | ||
| <label>Rotation: <span id="rotationOutput">0</span>π</label><br/> | ||
| <input id="rotationInput" type="range" min="-1" max="1" value="0" step="0.001"> | ||
| </div> | ||
|
|
||
| <div style="float: left;"> | ||
| <label>Z Position: <span id="positionOutput">0</span></label><br/> | ||
| <input id="positionInput" type="range" min="-1000" max="300" value="0" step="1"> | ||
| </div> | ||
|
|
||
| <div style="float: left;"> | ||
| <label>Scale: <span id="scaleOutput">1</span></label><br/> | ||
| <input id="scaleInput" type="range" min="0.1" max="1" value="1" step="0.01"> | ||
| <!-- note - there seems to be a strange issue with THREEjs sections of the hand disappearing for scales larger than 1. | ||
| Scale set as an option for the riggedHand will cause the issue. --> | ||
| </div> | ||
|
|
||
|
|
||
| </body> | ||
|
|
||
|
|
||
|
|
||
| <script> | ||
| // all units in mm | ||
| var initScene = function () { | ||
| window.scene = new THREE.Scene(); | ||
| window.renderer = new THREE.WebGLRenderer({ | ||
| alpha: true | ||
| }); | ||
|
|
||
| window.renderer.setClearColor(0x000000, 0); | ||
| window.renderer.setSize(window.innerWidth, window.innerHeight); | ||
|
|
||
| window.renderer.domElement.style.position = 'fixed'; | ||
| window.renderer.domElement.style.top = 0; | ||
| window.renderer.domElement.style.left = 0; | ||
| window.renderer.domElement.style.width = '100%'; | ||
| window.renderer.domElement.style.height = '100%'; | ||
|
|
||
| document.body.appendChild(window.renderer.domElement); | ||
|
|
||
| window.scene.add(new THREE.AmbientLight(0x888888)); | ||
|
|
||
| var pointLight = new THREE.PointLight(0xFFffff); | ||
| pointLight.position = new THREE.Vector3(-20, 10, 100); | ||
| pointLight.lookAt(new THREE.Vector3(0, 0, 0)); | ||
| window.scene.add(pointLight); | ||
|
|
||
| window.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); | ||
| window.camera.position.fromArray([0, 160, 400]); | ||
| window.camera.lookAt(new THREE.Vector3(0, 0, 0)); | ||
|
|
||
| window.addEventListener('resize', function () { | ||
|
|
||
| camera.aspect = window.innerWidth / window.innerHeight; | ||
| camera.updateProjectionMatrix(); | ||
| renderer.setSize(window.innerWidth, window.innerHeight); | ||
| renderer.render(scene, camera); | ||
|
|
||
| }, false); | ||
|
|
||
| scene.add(camera); | ||
|
|
||
|
|
||
| renderer.render(scene, camera); | ||
| }; | ||
|
|
||
| initScene(); | ||
|
|
||
|
|
||
|
|
||
|
|
||
| Leap.loop() | ||
| // note that transform must be _before_ rigged hand | ||
| .use('transform', { | ||
| quaternion: new THREE.Quaternion, | ||
| position: new THREE.Vector3, | ||
| scale: new THREE.Vector3(1,1,1) | ||
| }) | ||
| .use('playback', {recording: 'leap-playback-recording-110fps.json.lz'}) | ||
| .use('riggedHand', { | ||
| dotsMode: false, | ||
| parent: scene, | ||
| renderFn: function(){ | ||
| renderer.render(scene, camera); | ||
| } | ||
|
|
||
| }) | ||
| .connect(); | ||
|
|
||
| window.transformPlugin = Leap.loopController.plugins.transform; | ||
|
|
||
| document.getElementById('rotationInput').oninput = function(e){ | ||
| var value = e.target.value; | ||
| transformPlugin.quaternion.setFromEuler( | ||
| new THREE.Euler(0, Math.PI * parseFloat(value,10) , 0) | ||
| ); | ||
| document.getElementById('rotationOutput').innerHTML = value; | ||
| }; | ||
|
|
||
| document.getElementById('positionInput').oninput = function(e){ | ||
| var value = e.target.value; | ||
| transformPlugin.position.set( | ||
| 0,0,parseInt(value, 10) | ||
| ); | ||
| document.getElementById('positionOutput').innerHTML = value; | ||
| }; | ||
|
|
||
| document.getElementById('scaleInput').oninput = function(e){ | ||
| var value = parseFloat(e.target.value,10); | ||
| transformPlugin.scale.set( | ||
| value, value, value | ||
| ); | ||
| document.getElementById('scaleOutput').innerHTML = value; | ||
| }; | ||
|
|
||
| </script> | ||
|
|
||
| </html> |
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.