Three.js / webgl带有透明度或替代性的场景中的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()某处的缓冲区中，然后，如果匹配的像素或模糊区域是透明的，则我们不考虑所选的精灵。这将更加困难，因为子图形通常会旋转，缩放，居中偏移等。我什至都不完全知道如何实现该目标。

我想知道是否还有其他方法，尤其是更“合适”的方法。有什么方法可以将子画面图像转换为/提供具有某种网格的图像，然后用该图像精确地绘制网格，以便光线跟踪器实际上必须使用正确的对象形状，而不仅仅是图像平面（子画面）？在3D建模程序中采用每个精灵并精心建模其边缘会更好吗？我尝试了“网格”，“几何形状”，“图像”，“精灵”等的每种组合，但没有找到解决方案。

感谢您的帮助。乞eg不能成为选择者，但我也希望最终拥有动画对象，因此，如果不能通过这种解决方案使之成为现实，那将是另外的帮助。

谢谢

e：参见下面的@gman评论。我在颜色选择系统中工作，只真正将emissive.setHex更改为material.color.set（id），然后检查了颜色而不是自发光。效果很好，但似乎会使速度变慢。将不得不看我是否实施得不好或者我是否可以提高效率。谢谢你们！！

Answer 1

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

您可以按照this OpenGL hack中的描述创建颜色与每个对象的ID匹配的基本材料（将其转换为WebGL）

在绘制对象之前，使用Scene.overrideMaterial将材料分配给所有对象，并使用Object3D.onBeforeRender设置每个对象的颜色

将要付出代价，但我认为值得尝试