Question

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

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

我试过

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

或

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

Answer 1

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

传统上，在WebGL / OpenGL中，这个过程被称为“Picking”，并且在线有几个不错的资源。（例如：http://webgldemos.thoughtsincomputation.com/engine_tests/picking）核心流程是这样的，但是：

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

正如您所看到的，虽然概念上并不是一个困难的方法，但这也涉及几个中级WebGL主题，例如渲染到纹理，因此通常不建议初学者使用。我不确定xtk中是否有任何功能可以帮助解决这个问题（老实说，在你的帖子之前我从来没有听说过这个库），但我猜这是你必须自己实现的。< / p>

Answer 2

不支持DOM事件，但您可以使用xtk进行操作。看看这个JSFiddle

http://jsfiddle.net/haehn/r7Ugf/

// 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

容易，不是吗？

Answer 3

XTK采用Toji解释的方式（即使用frameBuffer，其中每个对象以不同的RGBA“颜色”呈现）。当你有少于255 ^ 4个对象时它会工作，所以几乎总是如此。还有其他一些方法，比如unprojecting，但我认为它们会更长。

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

这是一个有趣的事情：为X.object的变换添加一对getter / setter将允许，例如，用户在场景中放置医疗内容（由网格或其他东西建模）并放置到mesure距离或看它是否适合某项行动或类似的行为。哈恩不应该是个好主意吗？这是框架中的一个小改动。

将mouseevents添加到webgl对象

3 个答案: