Three.js - 将纹理绑定到粒子

Question

我的问题是如何将纹理绑定到粒子中 使用THREE.ParticleCanvasMaterial？

我的意思是将纹理绑定到粒子的语法是什么？

Answer 1

您应尝试使用ParticleBasicMaterial并传递Texture作为素材的地图属性：

var material = new THREE.ParticleBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'yourTexture.png' ) } );

另外，请查看canvas_particle_sprites示例。请注意，它正在生成纹理，但您可以加载自己的纹理，如上所述。根据经验，CanvasRenderer很慢/有很多/大纹理。

Answer 2

2019年更新：不推荐使用ParticleBasicMaterial

  

ParticleBasicMaterial已重命名为PointsMaterial。

https://threejs.org/docs/#api/en/deprecated/DeprecatedList

您需要使用PointsMaterial而不是ParticleBasicMaterial

 var snowMaterial = new THREE.PointsMaterial({
      size: 7,
      blending: THREE.AdditiveBlending,
      map: new THREE.TextureLoader().load("./assets/snowflake.png"),
      //createCircleTexture("#ffffff", 20),
      transparent: true,
      depthWrite: false
    });

或者，您可以使用画布根据乔治的建议为粒子纹理绘制圆形：

export const createCircleTexture = (color, size) => {
  var matCanvas = document.createElement("canvas");
  matCanvas.width = matCanvas.height = size;
  var matContext = matCanvas.getContext("2d");
  // create texture object from canvas.
  var texture = new THREE.Texture(matCanvas);
  // Draw a circle
  var center = size / 2;
  matContext.beginPath();
  matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
  matContext.closePath();
  matContext.fillStyle = color;
  matContext.fill();
  // need to set needsUpdate
  texture.needsUpdate = true;
  // return a texture made from the canvas
  return texture;
};

测试图像

结果