javascript - 使用 Three.js 程序生成粒子纹理

标签 javascript three.js procedural-generation

我的目标是创建一个粒子系统,其中涉及为每个粒子(顶点)按程序生成纹理,但我发现很难使用 Three.js 创建在 Canvas 和 WebGL 渲染器下工作的此类粒子系统的原型(prototype)

我想要达到的标准:

  1. 独立于渲染器(ParticleCanvasMaterial 不适用于 WebGL)
  2. 圆形纹理(ParticleBasicMaterial不喜欢 Canvas 纹理;无法使其输出圆形形状)
  3. 按程序生成这些纹理(不能仅使用带有准备好的圆形纹理的 loadTexture)

目前这对于 Three.js 可行吗?我是否缺少一些功能?

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

最佳答案

对于问题 1,您无能为力。将 ParticleCanvasMaterial 用于 CanvasRenderer

关于 2 和 3,您可以使用 ParticleBasicMaterialWebGLRenderer 获得程序生成的纹理。这是一个具有圆形纹理和随机顶点颜色的纹理:http://jsfiddle.net/7yDGy/1/

关于javascript - 使用 Three.js 程序生成粒子纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13860166/

相关文章:

javascript - NodeJS中如何接收来自jquery的post数据

javascript - 如何在单击时更改使用 JSONLoader 创建的对象的纹理 Material

javascript - 三个js dat-gui : Change opacity and visibility of object coming from OBJMTL Loader

audio - 如何在 Lazarus/Free Pascal 中生成和播放程序声音(方波等)?

java - 使用程序生成生成由图 block 组成的 16 x 16 block

c# - 如何用不同大小的四边形填充程序生成的网格?

javascript - 每个链接应该打开一个div

javascript - Chrome 扩展程序在安装时的新标签中不显示背景图片

javascript - 为什么这个 JavaScript 这么慢?仅仅是因为滞后吗?

javascript - Three.js - 变换控件