第一个Leap Motion测试页面 (webgl/three/leapjs/leap)

时间：2021-07-01 23:30:30

div#canvas-frame{
border: none;
cursor: pointer;
width: 100%;
height: 800px;
background-color: #EEEEEE;
}

var canvasframe;
var renderer;
var camera;
var scene;
var light;
var cube;
var width;
var height;
var X,Y,Z,DX,DY,DZ;

function initThree() {
canvasframe = document.getElementById('canvas-frame');
width = canvasframe.clientWidth;
height = canvasframe.clientHeight;
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height );
canvasframe.appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
}

function initCamera() {
camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 200;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt( {x:0, y:0, z:0 } );

}

function initScene() {
scene = new THREE.Scene();
}

function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set( 100, 100, 200 );
scene.add(light);
}

function initObject(){
cube = new THREE.Mesh(
new THREE.CubeGeometry(20,20,20),
new THREE.MeshLambertMaterial({color: 0xff0000})
);
scene.add(cube);
cube.position.set(0,0,0);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
Leap.loop(function(frame) {
if (frame.tools.length > 0) {
X = frame.tools[0].tipPosition[0];
Y = frame.tools[0].tipPosition[1];
Z = frame.tools[0].tipPosition[2];
DX = frame.tools[0].direction[0];
DY = frame.tools[0].direction[1];
DZ = frame.tools[0].direction[2];
updateScene(frame);

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

}

function updateScene(frame) {
cube.position.x = X;
cube.position.y = Y - 200;
cube.position.z = Z;
//cube.orientation.x = DX;
}

半年前订的leap终于在生日当天送到了~感觉精度和稳定性能都不错，FOV小了点（settings好像可以调高度），度量单位是毫米。待改进的当然是手势识别和遮挡估计，手掌的orientation在遮挡的时候出现了和kinect一样的问题...嘛，从graphics角度讲只要有多个sensor就可以无死角了，并不是什么大问题...

这个测试页面里只识别一个tool(我推荐用筷子，手指是不行的)，手指手掌的识别类似就不做了。对着屏幕手舞足蹈了一晚上之后以为，目前能保证质量和效果的leap的正确打开方式就是用筷子戳（精度确实厉害，把脉搏的振动都体现出来了）...感觉要作为VR设备使用的话，果然还是应该把leap贴在脸上配合rift使用...相当于头顶kinect+google glass的感觉吧...

相关文章