当前位置：文江博客话题详情

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

发布于 2024-12-20 21:33:06 字数 87 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冬天旳寂寞 2024-12-27 21:33:06

您应该尝试使用 ParticleBasicMaterial 并传入 Texture 作为材质的贴图属性：

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

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

画布粒子精灵预览

You should try to use a ParticleBasicMaterial and pass in your Texture as the map property of the material:

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

Also, have a look at the canvas_particle_sprites example. Notice that it's generating a texture on the fly, but you can load your own texture as described above. From experience, the CanvasRenderer is slow with many/large textures.

canvas particles sprites preview

回复收藏 0 原文

勿忘心安 2024-12-27 21:33:06

2019 更新：ParticleBasicMaterial 已弃用

ParticleBasicMaterial 已重命名为 PointsMaterial。

https://thirdjs.org/docs/#api/en/deprecated/DeprecatedList< /a>

您需要使用 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
    });

或者，您可以使用画布绘制粒子纹理的圆形形状，如 George 的建议：

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

测试图像

结果

Update 2019: ParticleBasicMaterial is deprecated

ParticleBasicMaterial has been renamed to PointsMaterial.

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

You need to use PointsMaterial instead of 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
    });

Alternatively you can use canvas to draw Circular shapes for particle texture as suggest by George:

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

Test Image

Result

回复收藏 0 原文

~没有更多了~