Sprite Example

part 1

by jmchen

HTML

<div id="info">Sprite Example
    <br/>Press Z to toggle</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var container, scene, camera, renderer, controls;
var keyboard = new KeyboardState();
var clock = new THREE.Clock();
var cube;
var particleGroup, particleAttributes;

init();
animate();

function init() {
    scene = new THREE.Scene();
    var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45,
        ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
        NEAR = 0.1,
        FAR = 20000;
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0, 150, 400);
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.setClearColor(0x9999ff);

    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var light = new THREE.PointLight(0xffffff);
    light.position.set(0, 250, 0);
    scene.add(light);

    THREE.ImageUtils.crossOrigin = '';
    var floorTexture = new THREE.ImageUtils.loadTexture('http://i.imgur.com/p8CRm9W.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(10, 10);
    var floorMaterial = new THREE.MeshBasicMaterial({
        map: floorTexture,
        side: THREE.DoubleSide
    });
    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);

    var particleTexture = THREE.ImageUtils.loadTexture('http://i.imgur.com/IdJcX5m.png');

    particleGroup = new THREE.Object3D();
    particleAttributes = {
        startSize: [],
        startPosition: [],
        randomness: []
    };

    var totalParticles = 200;
    var radiusRange = 150;
    for (var i = 0; i < totalParticles; i++) {
        var spriteMaterial = new THREE.SpriteMaterial({
            map:...