为webgl渲染器创建一个球形粒子的基本材质

creating a spherical particle basic material for webgl renderer in threejs

本文关键字：粒子 一个 webgl 创建      更新时间：2023-09-26

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

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

然而，我想切换到webGL渲染器，为了让事情运行得更快一点，但它没有程序选项。似乎我需要使用地图，但我不确定如何使用。有谁知道如何调整这段代码来完成与webGL渲染器相同的事情吗?

这里有一个例子，展示了如何使用WebGLRenderer为你的粒子程序创建纹理:http://jsfiddle.net/y18ag3dq/

然而，如果你想使用你自己的纹理，只需加载任何你想要的纹理到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);
相关文章：