three.js - THREE.js の独立した色付き粒子

Question

各パーティクルが独立した色 (およびサイズ/スケール) を持つことができる THREE.js を使用してパーティクル システムを作成しようとしています。ここに例があります

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

私がやりたいことと似ていますが、最新の THREE.js ライブラリでは動作しないため、API が変更されているようです。(例: Color setHSV は setHSL に置き換えられます)。

次のコードでは 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);
}

属性と固定および変更可能なアイテムを扱う例を見てきましたが、それらも機能していないようです。

基本的に、各パーティクルの色、位置、サイズ/スケールを変更できるようにする必要があります。位置は問題ではありません。