Question

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

使用getImageData时，我可以在画布中的2d图像中获得指定像素的颜色/不透明度;结果如：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});

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时，网格材质颜色难题

1 个答案: