Question

我正在使用Particle在Three.js中绘制不规则形状，代码片段如下：

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

我想要做的是正确选择不规则形状，我的问题是，如果我以这种方式绘制形状，我如何获得每个像素的颜色，以便我可以在拾取算法中使用

感谢。

Answer 1

您是否研究过toDataURL（）？

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

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

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

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

1 个答案: