It appears that you may be using an outdated version of three.js which is causing issues with the particle system implementation. Here is a demonstration similar to your project. Running this sample locally works fine, but when substituting it with the three.min.js from your work, it stops functioning correctly. You can download the three.js version used in the example here.
// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// define camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the container element
var $container = $('#container');
// create WebGL renderer, camera, and scene objects
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// position the camera away from origin
camera.position.z = 300;
// initialize the renderer with black background
renderer.setClearColor(new THREE.Color(0, 1));
renderer.setSize(WIDTH, HEIGHT);
// attach renderer's DOM element
$container.append(renderer.domElement);
// define particle variables
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"./Images/icon_ch.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});
// generate individual particles
for(var p = 0; p < particleCount; p++) {
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
particle.velocity = new THREE.Vector3(
0,
-Math.random(),
0);
particles.vertices.push(particle);
}
// create the particle system
var particleSystem = new THREE.ParticleSystem(
particles,
pMaterial);
particleSystem.sortParticles = true;
// add particle system to the scene
scene.addChild(particleSystem);
// animation loop
function update() {
particleSystem.rotation.y += 0.01;
var pCount = particleCount;
while(pCount--) {
var particle = particles.vertices[pCount];
if(particle.position.y < -200) {
particle.position.y = 200;
particle.velocity.y = 0;
}
particle.velocity.y -= Math.random() * .1;
particle.position.addSelf(
particle.velocity);
}
particleSystem.geometry.__dirtyVertices = true;
renderer.render(scene, camera);
requestAnimFrame(update);
}
requestAnimFrame(update);