在 Three.js 中与单个像素的 getImageData 一起使用时的网格 Material 颜色树桩

Question

这个问题严格来说是关于一种颜色材料（与一个像素所拥有的数据量相同）而不是纹理。

当使用getImageData时，我可以在canvas中获取二维图像中指定像素的color/opacity；结果类似于：50,41,26,255（例如）。

但我的问题是：不必使用像 toString(16) 这样的 rgba-to-hex 系统（然后分别使用字符串操作和 opacity/alpha 值，因为它是 0-1 和不是 00-FF) 等，用于转换，当为 THREE.MeshBasicMaterial 颜色指定确切的像素颜色和不透明度数据时...

有没有更高效的方法？

理想情况下，而不是：

new THREE.MeshBasicMaterial(
    {color:0x33AA55, transparent:true, opacity:0.8, side: THREE.DoubleSide})

然后是制作它所需的所有转换代码堆

拥有类似的东西：

new THREE.MeshBasicMaterial(
    {rgba-color:(ctx.getImageData(x, y, 1, 1).data), side: THREE.DoubleSide});

Answer 1

按照现在的情况，您确实需要对其进行转换。我没有看到为此发生的便捷方法，因为它是一个非常具体的用例。无论如何，手动进行转换并不是那么糟糕：如果您还想处理不透明度，则无论如何都必须专门处理该值，因为 THREE.Color 不使用它。

var data = context.getImageData( x, y, 1, 1 ).data;
var floats = data.slice( 0, 4 ).map( function( val ) { return val / 255; });
var color = THREE.Color( float[0], float[1], float[2] );
var opacity = float[4];

不完全是一堆代码，但如果它让你觉得很烦，那就为它创建一个函数。

不要使用字符串操作，那样容易出错且效率低下。

在 Three.js 中与单个像素的 getImageData 一起使用时的网格 Material 颜色树桩

Mesh Material color stumper when using with a single pixel's getImageData in Three.js

colors

getimagedata

three.js

html5-canvas