aperley/pose_visualizer.js

## pose_visualizer.js
function PoseVisualizer(el, width, height) {
    this.el = el;

    this.scene = new THREE.Scene();

    this.camera = camera = new THREE.PerspectiveCamera( 45, width/height, 1, 10000 );
    this.camera.position.z = 1000;
    this.camera.position.y = 500;
    this.camera.lookAt( new THREE.Vector3(0, 0, 0) );

    boxgeo = new THREE.BoxGeometry(400, 100, 400);
    edgegeo = new THREE.EdgesGeometry( boxgeo );
    edges = new THREE.LineSegments( edgegeo, new THREE.LineBasicMaterial({
        color: 0xffffff, linewidth: 2
    }));

    this.mesh = new THREE.Object3D();
    this.mesh.add( new THREE.Mesh( boxgeo, new THREE.MeshPhongMaterial({
        color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide,
        shading: THREE.FlatShading
    })));
    this.mesh.add(edges);
    var dir = new THREE.Vector3(1, 0, 0);
    var origin = boxgeo.center();
    var length = 450;
    var hex = 0xff0000;
    var xarrow = new THREE.ArrowHelper(dir, origin, length, hex);
    this.mesh.add(xarrow);

    dir = new THREE.Vector3(0, 0, -1);
    var yarrow = new THREE.ArrowHelper(dir, origin, length, hex)
    this.mesh.add(yarrow);

    dir = new THREE.Vector3(0, 1, 0);
    var zarrow = new THREE.ArrowHelper(dir, origin, length/2, hex);
    this.mesh.add(zarrow);

    this.scene.add(this.mesh);

    var light = new THREE.AmbientLight();
    this.scene.add(light);

    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize( width, height );
    el.appendChild( this.renderer.domElement );
    this.renderer.render(this.scene, this.camera);

    var self = this;
    this.animate = function() {
        requestAnimationFrame(self.animate);
        TWEEN.update();
        self.renderer.render(self.scene, self.camera);

    }

    this.setRotation = function(pitch, roll) {
        new TWEEN.Tween( this.mesh.rotation ).to( { x: pitch, z: roll }, 500).start();
    };

    this.animate();
}

## ui.html
<!DOCTYPE html>
<html>
<head>
    <script src="three.min.js"></script>
    <script src="tween.js"></script>
</head>
<body>

<script src="pose_visualizer.js"></script>

<div id="pose" width="500" height="500"></div>

<script>

function calculateAngles(x_accel, y_accel, z_accel) {
    return {
        roll: Math.atan(x_accel/Math.sqrt(y_accel*y_accel + z_accel*z_accel)),
        pitch: Math.atan(y_accel/Math.sqrt(x_accel*x_accel + z_accel*z_accel))
    };
}

el = document.getElementById("pose");
width = 500;
height = 300;
vis = new PoseVisualizer(el, width, height);

pitch = 0;
roll = 0;
setInterval(function() {
    if( pitch == 0 && roll == 0) {
        pitch = Math.PI/4;
        roll = Math.PI/4;
    } else {
        pitch = 0;
        roll = 0;
    }

    vis.setRotation(pitch, roll);
}, 1000);

</script>

</body>
</html>
	function PoseVisualizer(el, width, height) {
	this.el = el;

	this.scene = new THREE.Scene();

	this.camera = camera = new THREE.PerspectiveCamera( 45, width/height, 1, 10000 );
	this.camera.position.z = 1000;
	this.camera.position.y = 500;
	this.camera.lookAt( new THREE.Vector3(0, 0, 0) );

	boxgeo = new THREE.BoxGeometry(400, 100, 400);
	edgegeo = new THREE.EdgesGeometry( boxgeo );
	edges = new THREE.LineSegments( edgegeo, new THREE.LineBasicMaterial({
	color: 0xffffff, linewidth: 2
	}));

	this.mesh = new THREE.Object3D();
	this.mesh.add( new THREE.Mesh( boxgeo, new THREE.MeshPhongMaterial({
	color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide,
	shading: THREE.FlatShading
	})));
	this.mesh.add(edges);
	var dir = new THREE.Vector3(1, 0, 0);
	var origin = boxgeo.center();
	var length = 450;
	var hex = 0xff0000;
	var xarrow = new THREE.ArrowHelper(dir, origin, length, hex);
	this.mesh.add(xarrow);

	dir = new THREE.Vector3(0, 0, -1);
	var yarrow = new THREE.ArrowHelper(dir, origin, length, hex)
	this.mesh.add(yarrow);

	dir = new THREE.Vector3(0, 1, 0);
	var zarrow = new THREE.ArrowHelper(dir, origin, length/2, hex);
	this.mesh.add(zarrow);

	this.scene.add(this.mesh);

	var light = new THREE.AmbientLight();
	this.scene.add(light);

	this.renderer = new THREE.WebGLRenderer({ antialias: true });
	this.renderer.setSize( width, height );
	el.appendChild( this.renderer.domElement );
	this.renderer.render(this.scene, this.camera);

	var self = this;
	this.animate = function() {
	requestAnimationFrame(self.animate);
	TWEEN.update();
	self.renderer.render(self.scene, self.camera);

	}

	this.setRotation = function(pitch, roll) {
	new TWEEN.Tween( this.mesh.rotation ).to( { x: pitch, z: roll }, 500).start();
	};

	this.animate();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="three.min.js"></script>
	<script src="tween.js"></script>
	</head>
	<body>

	<script src="pose_visualizer.js"></script>

	<div id="pose" width="500" height="500"></div>

	<script>

	function calculateAngles(x_accel, y_accel, z_accel) {
	return {
	roll: Math.atan(x_accel/Math.sqrt(y_accely_accel + z_accelz_accel)),
	pitch: Math.atan(y_accel/Math.sqrt(x_accelx_accel + z_accelz_accel))
	};
	}

	el = document.getElementById("pose");
	width = 500;
	height = 300;
	vis = new PoseVisualizer(el, width, height);

	pitch = 0;
	roll = 0;
	setInterval(function() {
	if( pitch == 0 && roll == 0) {
	pitch = Math.PI/4;
	roll = Math.PI/4;
	} else {
	pitch = 0;
	roll = 0;
	}

	vis.setRotation(pitch, roll);
	}, 1000);

	</script>

	</body>
	</html>