webgl - 将鼠标事件添加到 webgl 对象

Question

我正在使用 xtk 在 webgl Canvas 中可视化医疗数据。目前我在玩这个课:

lesson 10

这个库非常好，但没有很好的文档记录。我想摆脱那个 gui 并添加一些鼠标事件。如果我从 gui 加载网格，我如何向网格添加鼠标事件？我实际上不知道从哪里开始。开始使用这个库有点令人困惑....

我试过了

mesh.click(function(){
    alert("yes");
  })

或

mesh.mousedown(function(){
    alert("yes");
}

Answer 1

在 WebGL 中呈现的对象不是 DOM 的一部分，因此不会像 DOM 元素那样生成事件。这意味着对于此类事件，您必须自己实现鼠标交互代码。

传统上，在 WebGL/OpenGL 中，此过程称为“拾取”，在线上有几个不错的资源。 (例如:http://webgldemos.thoughtsincomputation.com/engine_tests/picking)核心过程是这样的，不过:

• 为场景中的每个可拾取对象分配一种颜色。把它放在某处的查找表中
• 将整个场景重新渲染为纹理，使用分配的颜色渲染每个可拾取的对象
• 渲染场景后，确定您的鼠标坐标并读回该 X/Y 处的纹理颜色。
• 从查找表中获取与该颜色关联的对象。这是您的鼠标光标所指向的对象!

如您所见，虽然从概念上讲这不是一个困难的方法，但它还涉及几个中级 WebGL 主题，例如渲染到纹理，因此通常不建议初学者使用。我不确定 xtk 中是否有任何功能可以帮助解决这个问题(老实说，在你发帖之前我从未听说过这个库)，但我想这是你必须自己实现的东西。