将鼠标事件添加到webgl对象

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

这个库相当不错，但没有很好的文档记录。我想去掉这个gui并添加一些鼠标事件。如果从gui加载网格，如何向网格添加鼠标事件？我真的不知道从哪里开始。开始使用这个库有点让人困惑

我试过了

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

或

---

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

传统上，在WebGL/OpenGL中，这个过程被称为“挑选”，在线上有一些不错的资源。（例如：）核心流程如下：

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

---

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

DOM事件不受支持，但你可以用xtk实现。看看这个JSFIDLE

---

简单，不是吗？

XTK实现了Toji解释的拾取方式（即使用帧缓冲区，其中每个对象都以不同的RGBA“颜色”渲染）。当对象少于255^4个时，它将起作用，因此几乎总是这样。还有其他方法，比如无投影，但我认为它们会更长

因此，使用X.renderer.pick和X.renderer.get，您可以在鼠标下找到对象并更改其属性。但是，目前您只能更改Vizialization属性（请参见每个类中的setGetter和SetSetGetter），但无法移动X.object（因为X.object.\u transform属性是私有的，并且还没有用于它的getter/setter）

---

这是一件有趣的事情：例如，为X.object的变换添加一对getter/setter将允许用户在场景中放置医疗物品（由网格或其他东西建模），并放置到测量距离，或者查看它是否适合操作或类似操作。这不是个好主意，海恩？这是框架中的一个小变化。

Hm。。。很高兴xtk内置了这个功能！谢谢你以图书馆为中心的回答。非常感谢！我真的很想更多地参与其中。课程很好，但是应该有更多的内容来更深入更快地学习。我很高兴它对你有用。如果您能提供更多内容以使其他人更容易使用XTK，那将是一件好事：）该库仍然是非常新的和未知的，因此我们得到的帮助越多越好此示例是否仍适用于当前版本？可显示对象的转换始终是公开的，并且可以像中一样进行修改。我只是从上面修改了小提琴以使用变换。如果你想要完整的矩阵，你可以转到cube.transform.matrix.Ah是的，对不起，我没有在mixin可显示文件中看到getter。

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

// create and initialize a 3D renderer
var r = new X.renderer3D();
r.init();

// create a cube and a sphere
cube = new X.cube();
sphere = new X.sphere();
sphere.center = [-20, 0, 0];

r.interactor.onMouseMove = function() {

    // grab the current mouse position
    var _pos = r.interactor.mousePosition;

    // pick the current object
    var _id = r.pick(_pos[0], _pos[1]);

    if (_id != 0) {

        // grab the object and turn it red
        r.get(_id).color = [1, 0, 0];

    } else {

        // no object under the mouse
        cube.color = [1, 1, 1];
        sphere.color = [1, 1, 1];

    }

    r.render();

}

r.interactor.onMouseDown = function(left, middle, right) {

    // only observe right mouse clicks        
    if (!right) return;

    // grab the current mouse position
    var _pos = r.interactor.mousePosition;

    // pick the current object
    var _id = r.pick(_pos[0], _pos[1]);

    if (_id == sphere.id) {

        // turn the sphere green
        sphere.color = [0, 1, 0];
        r.render();

    }

}

r.add(cube); // add the cube to the renderer
r.add(sphere); // and the sphere as well
r.render(); // ..and render it