透明或备选场景中的RayCasting精灵

Question

我正在开发一个网页游戏，它需要选择绘制的对象，所以不是在简单的几何形状。为此，我一直在使用Three.JS在画布上将它们绘制为精灵，几个月来我一直在绞尽脑汁，试图弄清楚如何在我的webgl上下文中(使用ThreeJS)确定光线是否与精灵的透明部分碰撞。我已经搜索和阅读了尽可能多的帖子，但我只找到了两个解决方案的帖子：

var ctx =renderer.getContext("experimental-webgl", {preserveDrawingBuffer: true})
const pixel = new Uint8Array(4)
ctx.readPixels(10,30,1,1, ctx.RGBA,  ctx.UNSIGNED_BYTE,  pixel); log(pixel);

这需要使用preserveDrawingBuffer，这会破坏我的性能，或者：

raycaster.intersectObject(scene.getObjectByName('some sprite')[0]].uv

然后使用数学魔法将UV坐标与图像本身进行比较，我猜是从scene.getObjectByName('some sprite').material.map.image.src.valueOf()加载到某个缓冲区中，然后如果匹配的像素或模糊区域是透明的，那么我们就不会考虑选定的精灵。这将是额外的困难，因为精灵通常是旋转，缩放，中心偏移等。我甚至不是100%确定我将如何实现这些。

我想知道有没有其他方法，特别是更“合适”的方法。有没有什么方法可以将精灵图像转换为带有某种网格的图像，然后用图像精确地绘制网格，以便光线跟踪器实际上必须使用正确的对象形状，而不仅仅是图像平面(精灵)？把每个精灵都拿来，然后在3d建模程序中费力地为它的边缘建模，是不是更好？我尝试了“网格”、“几何图形”、“图像”、“精灵”等各种组合，但都没有找到解决方案。

任何帮助都是非常感谢的。乞讨者不能选择，但我也希望最终能有动画对象，所以如果这个解决方案不是不可能的话，那就更有帮助了。

谢谢

e:参见下面@gman的评论。我在颜色选择系统中工作，只是真正将emissive.setHex更改为material.color.set(id)，然后检查颜色而不是发射器。效果很好，但似乎放慢了速度。将不得不看看我的实现是不是很糟糕，或者我是否可以让它更有效率。感谢你们两个！

Answer 1

通过附加的绘制过程，您可以将场景渲染为具有每个对象的专用材质的纹理，并在其中拾取2D点

您可以创建一个基本材质，其颜色与每个对象的ID相匹配，如this OpenGL hack中所述(将其转化为WebGL)

使用Scene.overrideMaterial为所有对象指定材质，使用Object3D.onBeforeRender在绘制之前设置每个对象的颜色

这是有代价的，但我认为值得一试