0

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

我要达到的标准:

  1. 独立于渲染器(ParticleCanvasMaterial 不适用于 WebGL)
  2. 圆形纹理(ParticleBasicMaterial 不喜欢画布纹理;无法使其输出圆形)
  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);
4

2 回答 2

5

对于问题 1,您无能为力。使用ParticleCanvasMaterialfor CanvasRenderer

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

于 2012-12-13T15:59:02.327 回答
0

为什么不加载图像?您可以随时调整其属性,而不是在周围推挤全新的像素块。

于 2012-12-13T16:10:20.050 回答