使用three.js获取点击网格上的像素的颜色值

我正在使用three.js的最后一个版本，并且获得了带有渐变颜色的2D网格的场景。颜色取决于分配给每个顶点的值。我想通过点击鼠标点击它（通过获取颜色，并为我的值计算一些数字）来获得我渐变中每个点的值。使用three.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为null”或“imageData不是函数”（取决于我如何声明画布和上下文）。

因为我如果这种方法可以与网格使用没找到，我在这里问，如果有可能与否，不是如何去做更多。

在此先感谢

来源

2017-04-24 Myakko

相似问题：http://stackoverflow.com/questions/33433305/threejs-how-to-pick-the-intersection-point-color-of-an-object – Brakebein

首先，你不能从其中已经使用了WebGL的背景画布2D背景。这就是你得到ctx is null错误的原因。

要获得像素颜色，您有两个选项。

1.将WebGL的画布图像投影到一个2D上下文的画布。

为此，创建一个新的画布并将其尺寸设置为与THREE.js画布相同的尺寸，并从中获取2D上下文。然后，您可以借鉴的three.js所画布渲染图像到您的新画布的图像，使用2D背景：

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://threejs.org/examples/?q=instanc#webgl_interactive_instances_gpu

这个例子中THREE.WebGLRenderer使用readRenderTargetPixels。 https://threejs.org/docs/#api/renderers/WebGLRenderer

我没有使用这种方法，所以hopefullysomeone人可以在一些空白的填补任何个人的经验。

来源

2017-04-24 13:51:33 TheJim01

请参阅http://threejs.org/examples /webgl_read_float_buffer.html。 – WestLangley

非常感谢，我正在研究你给我的例子。我不知道我是否会成功，但我知道我正在努力做的事情是行不通的！ – Myakko

使用three.js获取点击网格上的像素的颜色值

回答

相关问题