获取几何面上的点的颜色

Question

我正在使用THREE.js渲染我的场景，我遇到了一个棘手的问题-如何获得几何面上特定点的颜色？

关于颜色，我不是指表面或材料颜色，我指的是特定点的实际输出颜色，基于特定位置的材料、表面颜色和纹理颜色。例如，如果给定点的面上纹理是红色的，材质颜色是半可见的(alpha = 0.5)，我希望得到的是：(r=1.0，g=0.0，b=0.0，a=0.5)。

注意:性能很重要。

有什么想法吗？谢谢!

Answer 1

一种简单直接的方法是使用<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

Answer 2

实际上，你所期望得到的并不是真的。你不是在考虑灯光。在没有灯光的情况下，对象将是黑色的。使用灯光，根据灯光的位置，您将获得不同的结果。即使使用平面着色，脸部的颜色也将取决于其法线。