THREEjs Particles Floor

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 SEPARATION = 100;
            var AMOUNTX = 50;
            var AMOUNTY = 50;

            var container, stats;
            var camera, scene, renderer, 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, 10000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();

                var material = new THREE.ParticleBasicMaterial();

                for ( var ix = 0; ix < AMOUNTX; ix++ ) {

                    for ( var iy = 0; iy < AMOUNTY; iy++ ) {

                        particle = new THREE.Particle( material );
                        particle.scale.y = 4;
                        particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
                        particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
                        scene.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 );

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );

                //

               ...