如何获取 Three.js 中每个像素的颜色（r，g，b，a）答案

【问题标题】：How to get color (r, g, b ,a) of every pixel in Three.js如何获取 Three.js 中每个像素的颜色（r，g，b，a）
【发布时间】：2013-10-30 09:35:38
【问题描述】：

我在 Three.js 中使用 Particle 绘制不规则形状，代码 sn-p 是这样的：

var hearts = function(context){

context.globalAlpha = 0.5;
var x = 0, y = 0;
context.scale(0.1, -0.1); // Scale so canvas render can redraw within bounds
context.beginPath();
context.bezierCurveTo(x + 2.5, y + 2.5, x + 2.0, y, x, y);
context.bezierCurveTo(x - 3.0, y, x - 3.0, y + 3.5, x - 3.0, y + 3.5);
...
context.closePath();
context.lineWidth = 0.1; //0.05
context.stroke();
}

var material = new THREE.ParticleCanvasMaterial({

program: heart,
blending: THREE.AdditiveBlending
});

 material.color.setRGB(255, 0, 0);  
 var particle = new THREE.Particle(material);

我想要做的是正确选择不规则形状，我的问题是，如果我这样绘制形状，我怎样才能得到每个像素的颜色，以便我可以在挑选算法中使用

谢谢。

【问题讨论】：

标签： colors three.js pixel particles

【解决方案1】：

你看过 toDataURL() 吗？

我在我的 three.js 逻辑中使用它来从浏览器中抓取并保存画布。从这个角度看：

http://www.patrick-wied.at/blog/how-to-create-transparency-in-images-with-html5canvas

在我看来，toDataURL() 也可用于查看每个像素的 RGB 和 A，如果需要更改它们并将其写回可见帧缓冲区。

【讨论】：