指针事件在反应三光纤中未触发

Question

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

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

https://codesandbox.io/s/hopeful-brook-h8rhs?file=/src/App.js

• 预期行为：当您将鼠标悬停在模型上或单击它时，它应该被记录到控制台。
• 实际行为：只有onPointerMisded事件会触发。

有时，onPointerover和onPointerOut事件确实有效。这似乎是随机工作的——有时是有效的，但大多数时候不是。

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

当更改为网格时，指针事件工作。因此，这个问题与没有检测指针事件直接相关。

Answer 1

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

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

1. 使用网格，并更新网格。定位属性以将其移近摄影机

var hitGeom = new THREE.BoxBufferGeometry(1, 1, 1);
var hitMat = new THREE.MeshBasicMaterial({visible: false});
// ...
<mesh geometry={hitGeom} material={hitMat}>