使用 Three.js 单击网格获取像素的颜色值

我正在使用 Three.js 的最新版本，我得到了一个带有 2D 网格和渐变颜色的场景。颜色取决于分配给每个顶点的值。我想通过用鼠标单击渐变的每个点来获取它的值（通过获取颜色，并对我的值进行一些数学计算）

我尝试使用这样的系统，因为它在这里工作：http://jsbin.com/wepuca/2/edit?html,js,输出 http://jsbin.com/wepuca/2/edit?html,js,output

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function echoColor(e){
    var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
    red = imgData.data[0];
    green = imgData.data[1];
    blue = imgData.data[2];
    alpha = imgData.data[3];
    console.log(red + " " + green + " " + blue + " " + alpha);  
}

我的问题是，当显示图像而不是网格时，该技术用于从画布获取数据。当我尝试在网格上使用它时，出现以下错误：

“TypeError：ctx is null”或“imageData不是函数”（取决于我如何声明我的画布及其上下文）。

由于我没有找到这种方法是否可以与网格一起使用，所以我在这里询问是否可以，而不是如何去做。

提前致谢

首先，您无法从已经使用 WebGL 上下文的画布获取 2D 上下文。这就是为什么你会得到ctx is null error.

要获取像素颜色，您有两种选择。

1. 将 WebGL 画布图像传输到具有 2D 上下文的画布上。

为此，请创建一个新画布并将其大小设置为与 THREE.js 画布大小相同，并从中获取 2D 上下文。然后，您可以使用 2D 上下文将渲染的图像从 THREE.js 画布绘制到新画布上作为图像：

var img2D = new Image();
twoDeeCanvasImage.addEventListener("load", function () {
    ctx2D.clearRect(0, 0, canvas2D.width, canvas2D.height);
    ctx2D.drawImage(img2D, 0, 0);
    // from here, get your pixel data
});
img2D.src = renderer.domElement.toDataURL("img/png");

从那里你可以使用getImageData，就像你之前做的那样。

此方法的一个警告是，您可能会看到由于通过导出图像时引入的压缩而导致图像质量下降toDataURL。在某些情况下你可以绕过这个：

if(ctx2D.imageSmoothingEnabled !== undefined){
    ctx2D.imageSmoothingEnabled  = false;
}
else if(ctx2D.mozImageSmoothingEnabled  !== undefined){
    ctx2D.mozImageSmoothingEnabled   = false;
}
else if(ctx2D.webkitImageSmoothingEnabled  !== undefined){
    ctx2D.webkitImageSmoothingEnabled   = false;
}
else{
    console.warn("Browser does not support disabling canvas antialiasing. Results image may be blurry.");
}

2.您还可以直接从渲染器获取像素值，但这会花费您额外的渲染通道。

请参阅此 THREE.js 示例：https://trijs.org/examples/?q=instanc#webgl_interactive_instances_gpu https://threejs.org/examples/?q=instanc#webgl_interactive_instances_gpu

本示例使用readRenderTargetPixels in the THREE.WebGLRenderer. https://trijs.org/docs/#api/renderers/WebGLRenderer https://threejs.org/docs/#api/renderers/WebGLRenderer

我没有任何使用此方法的个人经验，因此希望其他人可以填补一些空白。