Question

我正在尝试使用THREE.js创建一个粒子系统，其中每个粒子可以具有独立的颜色（和大小/比例）。这里有一个例子

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

与我想要做的类似，但API看起来已经改变了，因为这不适用于最新的THREE.js库。（例如，用setHSL替换Color setHSV）。

以下代码使用TypeScript和jQuery，但您明白了这一点：

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);
}

我已经看过处理属性以及固定和可更改项目的示例，但那些似乎也不起作用。

基本上，我需要每个粒子的颜色，位置和大小/比例都可以改变。职位不是问题。

THREE.js独立的有色颗粒

0 个答案: