rendering - THREE.js independent colored particles -


i trying create particle system using three.js in each particle can have independent color (and size/scale). there example here

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

is similar want do, api looks has changed, because not work latest three.js library. (e.g. color sethsv replaced sethsl).

the following code uses typescript , jquery, 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       : number; var x       : number; var y       : number; var z       : number; var color   : three.color;  // nbr_particles private attribute set 500 for(i = 0; < 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 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.render(); }  ////////////////////////////////////////////////////////////////////////////// private render() {     var time : number = date.now() * 0.00005;     var : number;      for(i = 0; < 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 attributes , fixed , changeable items, dont seem work either.

i basically, need each particle changeable in color, position, , size/scale. position not issue.


Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

java - More than one row with the given identifier was found: 1, for class: com.model.Diagnosis -