獲取幾何面上點的顏色

我正在使用THREE.js渲染我的場景，並且我得到了一個棘手的問題 - 如何獲取幾何面上特定點的顏色？通過顏色，我不是指臉部或材質的顏色，而是指特定點處的實際輸出顏色，具體取決於：材質，面部顏色和特定位置的紋理顏色。例如，如果在給定點上的臉上的紋理是紅色的，並且材質顏色是一半可見的（alpha = 0.5），我期望得到的是：（r = 1.0，g = 0.0，b = 0.0，a = 0.5）。獲取幾何面上點的顏色

注意：性能很重要。

任何想法？謝謝！

來源

2013-01-21 Ronen Ness

啓用實際上你期望得到的是不正確的。你不考慮燈。沒有燈光時，你的物體會變黑。隨着燈和取決於光的位置，你會得到不同的結果。即使您使用平面着色，臉部的顏色也將取決於其正常。

來源

2013-01-21 20:16:26 gaitat

好吧讓我們來縮小這個問題 - 讓我們假設ambient始終是0xffffff，現在我會忽略頂點顏色 - 只是材質顏色。這意味着棘手的部分只是基於uv和點在表面上的指定位置獲取紋理顏色。有任何想法嗎？謝謝 –

你必須RenderToTexture才能獲得這些信息。 – gaitat

一個簡單而直接的方法是使用<canvas>。

var canvas = document.createElement('canvas'); 
canvas.width = renderer.domElement.width; 
canvas.height = renderer.domElement.height; 

var context = canvas.getContext('2d'); 
context.drawImage(renderer.domElement, 0, 0); 

var imagedata = context.getImageData(0, 0, canvas.width, canvas.height); 
var data = imagedata.data; 

var index = (mousex + (mousey * canvas.width)) * 4; 

var red = data[ index ]; 
var green = data[ index + 1 ]; 
var blue = data[ index + 2 ]; 

var hex = red << 16 | green << 8 | blue << 0

來源

2013-01-22 00:32:07 mrdoob

感謝您的回答，但對我來說聽起來有點不夠高效，而且它還會包含從輸出顏色背景渲染（除非我不瞭解您的建議）。無論如何，我正在修補three.js的補丁，以添加UV coords作爲射線交集的返回值之一。如果解決方案足夠優雅，我將把它提交給THREE.js git hub，如果沒有，我會在這裏發佈答案。乾杯。 –

好，所以我的想法不夠通用，無法提交給github，但按照承諾，這裏是我的解決方案：我添加了頂點和uv地圖作爲交集函數的返回值，並且使用碰撞點和趕上其中一個頂點以生成距離因子。比我'歸一化'的因素，並使用它們和原始頂點uv得到結果uv。 –

獲取幾何面上點的顏色

回答

相關問題