使用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獲取點擊網格上的像素的顏色值

回答

相關問題