Procedurally generated texture for Particle with three.js

My goal is to create a particle system that involve procedurally generated texture for each particle (vertices), but I find it difficult to create a prototype of such particle system that works under both Canvas and WebGL renderer with three.js Criteria I am trying to achieve: 1. **Renderer independent** (ParticleCanvasMaterial won't work with WebGL) 2. **Circular texture** (ParticleBasicMaterial does not like canvas texture; unable to make it output a circle shape) 3. **Procedurally generate those texture** (cannot just use loadTexture with prepared circle texture) Is this currently possible with three.js? Am I missing some features? //create a texture generation function function simpleTexture() { // generate canvas var canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 100; // get context var context = canvas.getContext('2d'); // circle texture context.beginPath(); context.arc(50, 50, 50, 0, Math.PI*2, true); context.closePath(); context.fillStyle = "red"; context.fill(); // get texture texture = new THREE.Texture( canvas ); texture.needsUpdate = true; return texture; } //then use it like following... var material = new THREE.ParticleBasicMaterial({ color: 0xffffff, size: 1, map: simpleTexture, blending: THREE.AdditiveBlending, transparent: true }); var system = new THREE.ParticleSystem(particles, material);

以上就是Procedurally generated texture for Particle with three.js的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏