Three.js 三根光纤中未触发指针事件

我正在尝试使用GLTFJSX将指针事件添加到react three fiber中加载的GLTF文件中。然而，指针事件不会触发，我也不知道为什么

我已经尝试过将相同的事件添加到其他类似的代码沙盒中，它是有效的——那么，如果我做的基本上是相同的事情，为什么在本例中它不起作用呢

• 预期行为：当您将鼠标悬停在模型上或单击它时，应该将其记录到控制台
• 实际行为：只有

  onPointerMissed

  事件才会触发

有时，

onPointerOver

和

onPointerOut

事件确实有效。这似乎是随机的——有时有效，但大多数情况下并不有效

我错过了什么明显的东西吗

编辑

---

当更改为

mesh

时，指针事件起作用。因此，问题与未检测指针事件直接相关。

问题在于

skindmesh

修改图形卡（GPU）中的顶点位置，因此JavaScript端在执行命中测试（也称为光线投射）时不知道顶点已移动。请看下面的屏幕截图：

网格： 使用

Mesh

时，顶点显示在

geometry.attributes.position

指示的位置。形状很小，距离很远，但您的鼠标事件按预期工作。

斯金德梅什： 当您使用

skindmesh

时，顶点在GPU中被转换为更接近，但光线投射计算仍然使用原始

几何体.attributes.position

坐标来执行命中测试。这就是为什么您只能在红色框内非常小的区域中获得预期的鼠标事件。

解决： 解决方案因您的用例而异，但您可以执行以下任一操作：

使用

Mesh

，并更新

Mesh.position

属性，使其更靠近相机

如果需要

蒙皮网格

，请尽量保持骨架位移足够小，以便其蒙皮位置不会偏离其原始位置很远

您可以创建一个不可见的“hitbox”，只需将鼠标事件添加到其中。这是大多数游戏开发人员使用的，因为它可以更快地根据非常简单的几何图形计算命中测试：

var hitGeom=新的三点几何结构（1,1,1）；
var hitMat=new THREE.MeshBasicMaterial（{visible:false}）；
// ...

非常有趣，我甚至没有想到。谢谢你的回复和详细的解释。在这种情况下，我需要斯金德梅什。我以前尝试过使用hitbox，但由于这需要设置动画，我认为为模型和hitbox设置动画会更加困难。因此，我将尝试通过保持网格和skinnedMesh对齐，从Blender修复此问题。