particles-test

particles.js

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 self = this;

    function init() {


        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
        camera.position.z = 1000;

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

        geometry = new THREE.Geometry();

        _.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 );


        });

        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 } );

            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 );
        // renderer.setClearColor(0x000022, 1);
        $(selector)[0].appendChild( renderer.domElement );

        self.scene = scene;
        self.parameters = parameters;


    }
    //

    function animate() {

        requestAnimationFrame( animate );

        render();

    }

    function render() {

        var time = Date.now() * 0.00005;

        // camera.position.x += ( mouseX - camera.position.x ) * 0.05;
        // camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

        camera.lookAt( scene.position );

        for ( i = 0; i < scene.children.length; i ++ ) {

            var object = scene.children[ i ];

            if ( object instanceof THREE.PointCloud ) {

                object.rotation.y += 0.01;

            }

        }

        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] );

        }

        renderer.render( scene, camera );


    }



    init();
    animate();

};






ParticleTest.prototype.appendData = function(data) {


    var self = this;
    var geometry = new THREE.Geometry();

    _.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;

sample-data.json

[{
    
    "name": "just an array of zeros",
    "data": [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    
    
}]