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
Post a Comment