我的目标是创建一个粒子系统,其中涉及为每个粒子(顶点)按程序生成纹理,但我发现很难使用 Three.js 创建在 Canvas 和 WebGL 渲染器下工作的此类粒子系统的原型(prototype)
我想要达到的标准:
- 独立于渲染器(ParticleCanvasMaterial 不适用于 WebGL)
- 圆形纹理(ParticleBasicMaterial不喜欢 Canvas 纹理;无法使其输出圆形形状)
- 按程序生成这些纹理(不能仅使用带有准备好的圆形纹理的 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,您可以使用 ParticleBasicMaterial
和 WebGLRenderer
获得程序生成的纹理。这是一个具有圆形纹理和随机顶点颜色的纹理:http://jsfiddle.net/7yDGy/1/
关于javascript - 使用 Three.js 程序生成粒子纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13860166/