romanlarionov/gist:07b48c14634cce6d4237

## gistfile1.html
<html>
<head>
<!-- you can include other scripts here -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="papertowel.json"></script>
</head>
<body>
<script>

// Globals
var radius = 2;
var camera, scene, renderer, controls;
var geometry, material, mesh, pointcloud;

init();

function init() {
    var contentWidth = window.innerWidth - 20;
    var contentHeight = window.innerHeight - 20;

	// Renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(contentWidth, contentHeight);
   	renderer.setClearColor(0x66CAF2, 1);
    document.body.appendChild(renderer.domElement);

	// Scene
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.0009);

	// Point Cloud
	createPointCloud();
	createGrid();

	// Camera
    camera = new THREE.PerspectiveCamera(75, contentWidth / contentHeight, 1, 1000);
    moveCamera(dataObj);

 	// Controls
	controls = new THREE.TrackballControls(camera, renderer.domElement);

	controls.rotateSpeed = 1.0;
	controls.zoomSpeed = 1.2;
	controls.panSpeed = 0.2;

	controls.noZoom = false;
	controls.noPan = false;

	controls.staticMoving = false;
	controls.dynamicDampingFactor = 0.3;

	controls.minDistance = radius * 1.1;
	controls.maxDistance = radius * 100;

	window.addEventListener('resize', onWindowResize, false);
    render();
};

function moveCamera(obj) {
    // Translation
    var translationData = obj['poseAtTime']['translation'];
    camera.position.set(translationData[0], translationData[1], translationData[2]);

    // Rotation
    var rotationData = obj['poseAtTime']['rotation'];
    var destination = new THREE.Quaternion().set(rotationData[0], rotationData[1], rotationData[2], rotationData[3]);

   	camera.quaternion.slerp(destination, 0.07);
    camera.quaternion.normalize();
};

function createPointCloud() {
    var colors = [];
    var pointSize = 0.05;
    geometry = new THREE.Geometry({dynamic:true});
    material = new THREE.PointCloudMaterial({size:pointSize, vertexColors:true});

    // Create Dataview to deal with the byte buffer
    var arrayBuffer = new ArrayBuffer(dataObj['buffer'].length);
    var vertices = new DataView(arrayBuffer);
    for(var i = 0; i < dataObj['buffer'].length; i++)
         vertices.setUint8(i, dataObj['buffer'][i]);

    for(var i = 0; i < vertices.byteLength/Float32Array.BYTES_PER_ELEMENT; i+=3) {
        var x = vertices.getFloat32(i * Float32Array.BYTES_PER_ELEMENT, true);
        var y = vertices.getFloat32((i + 1) * Float32Array.BYTES_PER_ELEMENT , true)
        var z = vertices.getFloat32((i + 2) * Float32Array.BYTES_PER_ELEMENT, true)
        geometry.vertices.push(new THREE.Vector3(x, y, z));
        colors.push(new THREE.Color(x, y, z));
    }

    geometry.colors = colors;

    pointcloud = new THREE.PointCloud(geometry, material);
    scene.add(pointcloud);
};

function createGrid() {
	var size = 200, step = 1;
	var geometry = new THREE.Geometry();
	var material = new THREE.LineBasicMaterial({color: 0xcccccc, opacity: 0.2});

	for (var i = -size; i <= size; i += step ) {
		geometry.vertices.push(new THREE.Vector3(-size, 0, i));
		geometry.vertices.push(new THREE.Vector3( size, 0, i));
		geometry.vertices.push(new THREE.Vector3(i, 0,-size));
		geometry.vertices.push(new THREE.Vector3(i, 0, size));
	}

	var line = new THREE.Line(geometry, material, THREE.LinePieces);
	scene.add(line);
};

function renderFrustum() {
	var vertices = [];
	var geometry = new THREE.Geometry();


	geometry.vertices.push(new THREE.Vector3(, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));

};

function togglePerspective() {
	// move camera
	// change background color
	// render frustum

	var thirdPerson = {
		"poseAtTime": {
			"translation": [0.003, 0.003, 0.02],
			"rotation": [0.2, 0, 0, .5]
	}};
	moveCamera(thirdPerson);

   	renderer.setClearColor(0xE7E6E8, 1);

};

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

	controls.screen.width = width;
	controls.screen.height = height;

    renderer.setSize( window.innerWidth, window.innerHeight );
	render();
};

function render() {
    requestAnimationFrame(render);

	window.onKeyDown = function(event) {
		if (event.keyCode === '32') {	// space
			moveCamera(dataObj);
		}
	}

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

</script>
</body>
</html>
	<html>
	<head>
	<!-- you can include other scripts here -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
	<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
	<script src="papertowel.json"></script>
	</head>
	<body>
	<script>

	// Globals
	var radius = 2;
	var camera, scene, renderer, controls;
	var geometry, material, mesh, pointcloud;

	init();

	function init() {
	var contentWidth = window.innerWidth - 20;
	var contentHeight = window.innerHeight - 20;

	// Renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(contentWidth, contentHeight);
	renderer.setClearColor(0x66CAF2, 1);
	document.body.appendChild(renderer.domElement);

	// Scene
	scene = new THREE.Scene();
	scene.fog = new THREE.FogExp2(0x000000, 0.0009);

	// Point Cloud
	createPointCloud();
	createGrid();

	// Camera
	camera = new THREE.PerspectiveCamera(75, contentWidth / contentHeight, 1, 1000);
	moveCamera(dataObj);

	// Controls
	controls = new THREE.TrackballControls(camera, renderer.domElement);

	controls.rotateSpeed = 1.0;
	controls.zoomSpeed = 1.2;
	controls.panSpeed = 0.2;

	controls.noZoom = false;
	controls.noPan = false;

	controls.staticMoving = false;
	controls.dynamicDampingFactor = 0.3;

	controls.minDistance = radius * 1.1;
	controls.maxDistance = radius * 100;

	window.addEventListener('resize', onWindowResize, false);
	render();
	};

	function moveCamera(obj) {
	// Translation
	var translationData = obj['poseAtTime']['translation'];
	camera.position.set(translationData[0], translationData[1], translationData[2]);

	// Rotation
	var rotationData = obj['poseAtTime']['rotation'];
	var destination = new THREE.Quaternion().set(rotationData[0], rotationData[1], rotationData[2], rotationData[3]);

	camera.quaternion.slerp(destination, 0.07);
	camera.quaternion.normalize();
	};

	function createPointCloud() {
	var colors = [];
	var pointSize = 0.05;
	geometry = new THREE.Geometry({dynamic:true});
	material = new THREE.PointCloudMaterial({size:pointSize, vertexColors:true});

	// Create Dataview to deal with the byte buffer
	var arrayBuffer = new ArrayBuffer(dataObj['buffer'].length);
	var vertices = new DataView(arrayBuffer);
	for(var i = 0; i < dataObj['buffer'].length; i++)
	vertices.setUint8(i, dataObj['buffer'][i]);

	for(var i = 0; i < vertices.byteLength/Float32Array.BYTES_PER_ELEMENT; i+=3) {
	var x = vertices.getFloat32(i * Float32Array.BYTES_PER_ELEMENT, true);
	var y = vertices.getFloat32((i + 1) * Float32Array.BYTES_PER_ELEMENT , true)
	var z = vertices.getFloat32((i + 2) * Float32Array.BYTES_PER_ELEMENT, true)
	geometry.vertices.push(new THREE.Vector3(x, y, z));
	colors.push(new THREE.Color(x, y, z));
	}

	geometry.colors = colors;

	pointcloud = new THREE.PointCloud(geometry, material);
	scene.add(pointcloud);
	};

	function createGrid() {
	var size = 200, step = 1;
	var geometry = new THREE.Geometry();
	var material = new THREE.LineBasicMaterial({color: 0xcccccc, opacity: 0.2});

	for (var i = -size; i <= size; i += step ) {
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3( size, 0, i));
	geometry.vertices.push(new THREE.Vector3(i, 0,-size));
	geometry.vertices.push(new THREE.Vector3(i, 0, size));
	}

	var line = new THREE.Line(geometry, material, THREE.LinePieces);
	scene.add(line);
	};

	function renderFrustum() {
	var vertices = [];
	var geometry = new THREE.Geometry();


	geometry.vertices.push(new THREE.Vector3(, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));
	geometry.vertices.push(new THREE.Vector3(-size, 0, i));

	};

	function togglePerspective() {
	// move camera
	// change background color
	// render frustum

	var thirdPerson = {
	"poseAtTime": {
	"translation": [0.003, 0.003, 0.02],
	"rotation": [0.2, 0, 0, .5]
	}};
	moveCamera(thirdPerson);

	renderer.setClearColor(0xE7E6E8, 1);

	};

	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	controls.screen.width = width;
	controls.screen.height = height;

	renderer.setSize( window.innerWidth, window.innerHeight );
	render();
	};

	function render() {
	requestAnimationFrame(render);

	window.onKeyDown = function(event) {
	if (event.keyCode === '32') { // space
	moveCamera(dataObj);
	}
	}

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

	</script>
	</body>
	</html>