Question

I’m using THREE.js to render my scene and I got a tricky question – how can I get the color of a specific point on a geometry face?

By color, I don’t mean the face or material color, I mean the actual output color at the specific point, based on: material, face color AND texture color at the specific location. for example, if the texture on the face at given point is red, and the material color is half visible (alpha = 0.5), what I expect to get is: (r=1.0, g=0.0, b=0.0, a=0.5).

Note: performance is important.

Any ideas?
Thanks!

Answer 1

A simple and straightforward way would be to do it with <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