javascript - Three.js Ray忽略透明像素

Question

我有一些 Vector3ds，其中包含使用透明 png 作为 Material 的平面几何图形。

我遇到的麻烦是 Raycaster 正在拾取整个对象，因此在 Material 附近单击足以激活相应的功能。

是否可以对光线转换器隐藏网格的透明部分？

在 Alex 的帮助下，我找到了关于该对象的实际要点。

我现在如何将其转换为图像上的像素以测试透明度？

Answer 1

我不熟悉 Three.js，但是 online documentation向我建议，Raycast 算法是根据对象在空间中的分布而不是它们的组成来计算的。在这方面，我认为没有任何特定的方法可以通知 Raycast 我们只希望测试不透明像素。

我想首先，使用 Three.js 的 Raycast.intersectObjects(pObjects, pRecursive) 来分析您的哪些对象与射线的空间扩展。过滤对象后，您需要执行特定测试以确定光线是否与不透明像素发生碰撞。

一个简单的方法是获取我们保证与光线碰撞的物体，并确定光线穿过物体时的中心位置。 (这将增加复杂性，具体取决于您的对象是否可以缩放，或者您的对象/光线是否可以旋转。)光线在 3D 空间中的交点的绝对位置可以使用三 Angular 函数找到，这需要考虑对于光线的 near 和 far 值。

通过了解图像的位置和尺寸，您可以将 3D 世界中光线转换交点的坐标转换为相对于您正在使用的图像的离散 2D 坐标。

例如，想象一个简单的 2D 案例。如果您有一个 50px² 的图像位于原点，并且光线在位置 (25,25) 与图像相交，您可以使用此信息来索引像素数据数组并测试像素的 alpha 值。由于 PNG 图像数据存储 RGBA 数据，因此您需要查看每个像素四个字节。因此，您需要一个类似于下例的实现，因为图像数据是连续存储的。

byte lPixelRed   = bitmap.getData()[(X  + Y*bitmap.getWidth())*4];
byte lPixelGreen = bitmap.getData()[(X  + Y*bitmap.getWidth())*4 + 1];
byte lPixelBlue  = bitmap.getData()[(X  + Y*bitmap.getWidth())*4 + 2];
byte lPixelAlpha = bitmap.getData()[(X  + Y*bitmap.getWidth())*4 + 3];

找到像素数据区域后，您可以测试 alpha 字节以确定它们是不透明 (0xFF) 还是透明 (0x00)。您可以使用它来确定光线转换是否已成功与您的对象发生碰撞。