在 Three.js 中与单个像素的 getImageData 一起使用时的网格材质颜色障碍答案

【问题标题】：Mesh Material color stumper when using with a single pixel's getImageData in Three.js在 Three.js 中与单个像素的 getImageData 一起使用时的网格材质颜色障碍
【发布时间】：2016-01-22 05:56:39
【问题描述】：

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

当使用getImageData 时，我可以很好地获得画布中二维图像中指定像素的颜色/不透明度；结果是：50,41,26,255（例如）。

但我的问题是：不必使用像 toString(16) 这样的 rgba-to-hex 系统（然后分别使用字符串操作和不透明度/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});

【问题讨论】：

这不是一个真正的问题，而是对某个功能的建议。

标签： colors three.js html5-canvas getimagedata

【解决方案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];

不完全是一堆代码，但如果它太困扰你，那么为它创建一个函数。

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

【讨论】：