0

I am trying to create a particle system using THREE.js in which each particle can have an independent color (and size/scale). There is an example here

http://threejsdoc.appspot.com/doc/three.js/examples/webgl_particles_billboards_colors.html

is similar to what I want to do, but the API looks like it has changed, because this will not work with the latest THREE.js library. (e.g. Color setHSV replaced with setHSL).

The following code uses TypeScript and jQuery, but you get the idea:

var w: number = 1000;
var h: number = 1000;

this.renderer = new THREE.WebGLRenderer({ antialias: true } );
this.renderer.setClearColor(new THREE.Color(0x222222), 1);
this.renderer.setSize(w, h);
this.control.append(this.renderer.domElement);

this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(50, w / h, 2, 3000);
this.camera.position.set(0, 0, 3000);
this.scene.add(this.camera);

this.geometry = new THREE.Geometry();
var vector: THREE.Vector3;
var texture: THREE.Texture = THREE.ImageUtils.loadTexture("src/assets/ballflip.png");
var i       : number;
var x       : number;
var y       : number;
var z       : number;
var color   : THREE.Color;

// nbr_particles is a private attribute set to 500
for(i = 0; i < this.nbr_particles; i++)
{
    x = 2000 * Math.random() - 1000;
    y = 2000 * Math.random() - 1000;
    z = 2000 * Math.random() - 1000;

    vector = new THREE.Vector3(x, y, z);
    this.geometry.vertices.push(vector);

    color = new THREE.Color(0xffffff);
    color.setHSL( Math.random(), 1.0, 1.0);

    this.colors.push( color ); // colors is an array of THREE.Color
}
this.geometry.colors = this.colors;
this.geometry.dynamic = true;

this.material = new THREE.ParticleBasicMaterial({ size: 18,
                                                  sizeAttenuation: false,
                                                  map: texture,
                                                  transparent: true,
                                                  vertexColors: true });

this.particles = new THREE.ParticleSystem(this.geometry, this.material);
this.particles.sortParticles = true;
this.scene.add( this.particles );
this.animate();

////////////////////////////////////////////////////////////////////////////
private animate(): void
{
    requestAnimationFrame( jQuery.proxy( this.animate, this ) );
    this.render();
}

//////////////////////////////////////////////////////////////////////////////
private render()
{
    var time : number = Date.now() * 0.00005;
    var i : number;

    for(i = 0; i < this.nbr_particles; i++)
    {
        this.geometry.colors[i].setHSL(Math.random(), 1.0, 1.0);
        //this.geometry.vertices[1].color.setHSL(Math.random(), 1.0, 1.0);
    }
    this.geometry.colorsNeedUpdate = true;

    this.renderer.render(this.scene, this.camera);
}

I've seen examples dealing with attributes and fixed and changeable items, but those dont seem to work either.

I basically, need each particle to be changeable in color, position, and size/scale. Position is not an issue.

4

0 回答 0