CODEWITHSUNDEEP
javascriptthree.js
Ronen Ness
Ronen Ness

Reputation: 10760

Get the color of a point on a geometry face

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!

Upvotes: 1

Views: 155

Answers (2)

mrdoob
mrdoob

Reputation: 19602

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

Upvotes: 1

gaitat
gaitat

Reputation: 12642

enabled Well actually what you expect to get is not true. You are not considering lights. With no lights your object will be black. With lights and depending on the location of the light you will get different results. Even if you use flat shading the color of the face will depend on its normal.

Upvotes: 0

Related Questions