Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
point-cloud
var THREE = require('three.js');
var _ = require('lodash');
var ParticleTest = function(selector, data, images, opts) {
var width = $(selector).width();
var height = width * 0.7;
var container, stats;
var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, size;
var mouseX = 0, mouseY = 0;
var halfWidth = width / 2;
var halfHeight = height / 2;
var zScaleFactor = 15;
var self = this;
function init() {
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
// camera.position.x = 500;
// camera.position.z = 2800;
scene = new THREE.Scene();
geometry = new THREE.Geometry();
var avgs = [0, 0, 0];
_.each(data.points, function(p) {
avgs[0] += p[1];
avgs[1] += p[2] * zScaleFactor;
avgs[2] += p[0];
});
avgs = _.map(avgs, function(n) { return n / data.points.length; });
var colors = [];
_.each(data.points, function(p, i) {
var vertex = new THREE.Vector3();
vertex.x = p[1] - avgs[0];
vertex.y = p[2] * zScaleFactor - avgs[1];
vertex.z = p[0] - avgs[2];
geometry.vertices.push( vertex );
colors[i] = new THREE.Color();
colors[i].setRGB(data.colors[i][0], data.colors[i][1], data.colors[i][2]);
});
geometry.colors = colors;
console.log(geometry.colors);
// camera.position.x = avgs[0];
camera.position.y = 0;
camera.position.x = -1500;
camera.position.z = 0;
console.log(avgs);
camera.lookAt(new THREE.Vector3(0, 0, 0));
parameters = [
[ [1, 1, 0.5], 5 ],
[ [0.95, 1, 0.5], 4 ],
[ [0.90, 1, 0.5], 3 ],
[ [0.85, 1, 0.5], 2 ],
[ [0.80, 1, 0.5], 1 ]
];
for ( i = 0; i < parameters.length; i ++ ) {
color = parameters[i][0];
size = parameters[i][1];
materials[i] = new THREE.PointCloudMaterial({
size: size,
vertexColors: THREE.VertexColors
});
particles = new THREE.PointCloud( geometry, materials[i] );
// particles.rotation.x = Math.random() * 6;
// particles.rotation.y = Math.random() * 6;
// particles.rotation.z = Math.random() * 6;
scene.add( particles );
}
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
$(selector)[0].appendChild( renderer.domElement );
$(selector)[0].addEventListener( 'mousemove', onDocumentMouseMove, false );
$(selector)[0].addEventListener( 'mousewheel', mousewheel, false );
$(selector)[0].addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox
self.scene = scene;
self.parameters = parameters;
}
function onDocumentMouseMove( event ) {
var offset = $(selector).offset();
mouseX = event.offsetX;// - offset.left;
mouseY = event.offsetY;// - offset.top;
}
function animate() {
requestAnimationFrame( animate );
render();
}
document.body.addEventListener( 'mousewheel', mousewheel, false );
document.body.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox
var mousewheel = function ( e ) {
console.log('updating mousewheel');
var d = ((typeof e.wheelDelta != "undefined")?(-e.wheelDelta):e.detail);
d = 100 * ((d>0)?1:-1);
console.log(d);
console.log(camera.position.x);
camera.position.x += d;
console.log(camera.position.x);
}
function render() {
// var time = Date.now() * 0.00009;
// camera.position.x += ( mouseX - camera.position.x ) * 0.05;
// camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
var zRot = 0;
var yRot = 0;
if(mouseY > (2 * height / 3)) {
zRot = -0.01;
} else if(mouseY < (height / 3)) {
zRot = 0.01;
}
if(mouseX > (2 * width / 3)) {
yRot = -0.01;
} else if(mouseX < (width / 3)) {
yRot = 0.01;
}
// camera.lookAt( scene.position );
for ( i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.PointCloud ) {
object.rotation.z += zRot;
object.rotation.y += yRot;
}
}
// for ( i = 0; i < materials.length; i ++ ) {
// color = parameters[i][0];
// h = ( 360 * ( color[0] + time ) % 360 ) / 360;
// materials[i].color.setHSL( h, color[1], color[2] );
// }
// camera.position.z = 700 * (cos(time) * cos(time));
// camera.rotation.y += 0.01;
renderer.render( scene, camera );
}
init();
animate();
};
ParticleTest.prototype.updateData = function(data) {
var self = this;
var geometry = new THREE.Geometry();
console.log('updating data')
_.each(data, function() {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2000 - 1000;
vertex.y = Math.random() * 2000 - 1000;
vertex.z = Math.random() * 2000 - 1000;
geometry.vertices.push( vertex );
});
var materials = []
for (var i = 0; i < self.parameters.length; i ++ ) {
var color = self.parameters[i][0];
var size = self.parameters[i][1];
materials[i] = new THREE.PointCloudMaterial( { size: size } );
var particles = new THREE.PointCloud( geometry, materials[i] );
self.scene.add( particles );
}
};
module.exports = ParticleTest;
This file has been truncated, but you can view the full file.
[{
"name": "fish",
"data": {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.