Skip to content

Instantly share code, notes, and snippets.

@romanlarionov
Last active August 29, 2015 14:11
Show Gist options
  • Save romanlarionov/07b48c14634cce6d4237 to your computer and use it in GitHub Desktop.
Save romanlarionov/07b48c14634cce6d4237 to your computer and use it in GitHub Desktop.
Point Cloud Rendering Script
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment