将鼠标事件添加到 webgl 对象

Question

我使用 xtk 在 webgl 画布中可视化医疗数据。目前我正在学习这节课：

第10课

这个库相当不错，但文档不多。我想摆脱那个图形用户界面并添加一些鼠标事件。如果我从 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 中是否有任何功能可以帮助实现这一点（老实说，在您发表文章之前我从未听说过该库），但我猜这是您必须自己实现的东西。