Javascript 在threejs中为webgl渲染器创建球形粒子基本材质

我有一个正在工作的threejs示例，其中使用程序函数通过画布将粒子渲染到球形对象上，如下所示：

var material = new THREE.ParticleCanvasMaterial( {

      color: 0xffffff,
      program: function ( context ) {

        context.beginPath();
        context.arc( 0, 0, 1, 0, PI2, true );
        context.closePath();
        context.fill();

      }

    } );

    for ( var i = 0; i < 1000; i ++ ) {

      particle = new THREE.Particle( material );
      particle.position.x = Math.random() * 2 - 1;
      particle.position.y = Math.random() * 2 - 1;
      particle.position.z = Math.random() * 2 - 1;
      particle.position.normalize();
      particle.position.multiplyScalar( Math.random() * 10 + 600 );

      initParticle( particle, i * 10 );

      scene.add( particle );

    }

var材料=新的三个。ParticleCanvasMaterial（{
颜色：0xffffff，
程序：函数（上下文）{
context.beginPath（）；
弧（0,0,1,0,PI2，true）；
closePath（）；
context.fill（）；
}
} );
对于（变量i=0；i<1000；i++）{
粒子=新的三个。粒子（材料）；
particle.position.x=Math.random（）*2-1；
particle.position.y=Math.random（）*2-1；
particle.position.z=Math.random（）*2-1；
particle.position.normalize（）；
particle.position.multilyscalar（Math.random（）*10+600）；
初始粒子（粒子，i*10）；
场景。添加（粒子）；
}

---

但是，我想切换到webGL渲染器，以便运行得更快一些，但它没有程序选项。似乎我需要使用地图，但我不确定如何使用。任何人都知道如何调整此代码以使用webGL渲染器完成相同的任务。

下面是一个示例，演示如何使用webGL渲染器按程序为粒子创建纹理：

但是，如果您希望使用自己的纹理，只需将所需的任何纹理加载到

map

字段：

var texture = THREE.ImageUtils.loadTexture('/images/my_texture.png');
// Do NOT set this flag. Explanation provided by WestLangley in the comments
// texture.needsUpdate=true;

var material = new THREE.ParticleBasicMaterial({
  // ...
  map: texture,
  // add all relevant fields as described in the link above
});

// geometry should contain your particle vertices
var particle = new THREE.ParticleSystem(geometry, material);
scene.add(particle);

---

相关：不要使用

ImageUtils.loadTexture（）

设置

needsUpdate

标志。它在纹理加载后为您设置。在纹理加载完成之前设置它可能会导致渲染错误。我错过了那个，我的错。编辑了我的答案。