THREEjs Particles

Generate bunch of particle matrix

by secretgspot

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>
<div id="container"></div>

CSS

body {
    background-color: rgb(200,200,200);
    margin: 0px;
    overflow: hidden;
}

JavaScript

var container, stats;
            var camera, scene, renderer, group, particle;
            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

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

                scene = new THREE.Scene();

                var PI2 = Math.PI * 2;
                var program = function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.closePath();
                    context.fill();

                }

                group = new THREE.Object3D();
                scene.add( group );

                for ( var i = 0; i < 1000; i++ ) {

                    particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: program } ) );
                    particle.position.x = Math.random() * 2000 - 1000;
                    particle.position.y = Math.random() * 2000 - 1000;
                    particle.position.z = Math.random() * 2000 - 1000;
                    particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
                    group.add( particle );
                }

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

               ...