myojs
Version:
JavaScript/ES2015/ES6 client for the Thalmic Labs Myo
139 lines (95 loc) • 3.49 kB
HTML
<html lang="en">
<head>
<title>three.js webgl - geometry hierarchy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
</style>
</head>
<body>
<script src="lib/three.js"></script>
<script src="../build/myojs.min.js"></script>
<script>
var hub;
var container;
var camera, scene, renderer;
var geometry, group;
var myoX = 0, myoY = 0, myoZ = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
initMyo();
init();
animate();
function initMyo() {
hub = Myo.Hub();
hub.on('frame', function(frame) {
myoX = ( (frame.pitch * 1000) - windowHalfX );
myoY = ( (frame.yaw * 1000) - windowHalfY );
myoZ = ( (frame.roll * 500));
});
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1, 10000 );
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
group = new THREE.Object3D();
for ( var i = 0; i < 1000; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 2000 - 1000;
mesh.position.y = Math.random() * 2000 - 1000;
mesh.position.z = Math.random() * 2000 - 1000;
mesh.rotation.x = Math.random() * 2 * Math.PI;
mesh.rotation.y = Math.random() * 2 * Math.PI;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
group.add( mesh );
}
scene.add( group );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x000000 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = Date.now() * 0.001;
var rx = Math.sin( time * 0.7 ) * 0.5,
ry = Math.sin( time * 0.3 ) * 0.5,
rz = Math.sin( time * 0.2 ) * 0.5;
camera.position.x += ( myoX - camera.position.x ) * .05;
camera.position.y += ( - myoY - camera.position.y ) * .05;
camera.position.z += ( - myoZ - camera.position.z ) * .05;
camera.lookAt( scene.position );
//group.rotation.x = rx;
//group.rotation.y = ry;
//group.rotation.z = rz;
renderer.render( scene, camera );
}
</script>
</body>
</html>