Question

我的目标是创建一个粒子系统，该粒子系统涉及每个粒子（顶点）的程序生成纹理，但我发现很难创建这样的粒子系统的原型，它在Canvas和WebGL渲染器下都可以使用three.js

我想要实现的标准：

渲染器独立（ParticleCanvasMaterial无法与WebGL一起使用）
圆形纹理（ParticleBasicMaterial不喜欢画布纹理;无法输出圆形）
程序生成那些纹理（不能只使用带有预备圆纹理的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);

Answer 1

关于问题1，您无能为力。对ParticleCanvasMaterial使用CanvasRenderer。

关于2和3，您可以具有ParticleBasicMaterial和WebGLRenderer的程序生成纹理。这是一个圆形纹理和随机顶点颜色：http://jsfiddle.net/7yDGy/1/

Answer 2

为什么不加载图片？您可以随时调整其属性，而不是推动全新的像素块。

使用three.js对Particle进行程序生成的纹理

2 个答案: