Question

我正在尝试使用以下代码（基于Click to zoom in WebGL）在我的数据中找到一个点（屏幕到世界坐标）：

    var world1 = [0,0,0,0] ;
    var world2 = [0,0,0,0] ;
    var dir    = [0,0,0] ;
    var w      = event.srcElement.clientWidth ;
    var h      = event.srcElement.clientHeight ;
    // calculate x,y clip space coordinates
    var x      = (event.offsetX-w/2)/(w/2) ;
    var y      = -(event.offsetY-h/2)/(h/2) ;
    mat4.inverse(pvMatrix, pvMatrixInverse) ;
    // convert clip space coordinates into world space
    mat4.multiplyVec4(pvMatrixInverse, [x,y,0,1], world1) ;

为简单起见，我设置了一系列顶点，其中z坐标始终为0：坐标我正在绘图：

0.0 0.0 0.0
1.0 1.0 0.0
1.0 0.0 0.0
0.0 1.0 0.0
0.5 0.5 0.0

然后我将world1中的值与我的顶点进行比较。 world1中的值与我知道单击的位置不匹配。任何人都可以帮忙吗？

Answer 1

请在How to get object in WebGL 3d space from a mouse click coordinate查看我的类似答案。

TL; DR：我认为您的非项目功能不完整。查看jax/camera.js#L568的源代码，了解其他实现。另见glhUnProjectf C implementation，前者（松散地）基于此。

最后一件事。注意HTML canvas元素。通常情况下，它不在您认为的位置，并且使像素位置准确的唯一方法是向上遍历DOM。有关示例，请参阅jax/events.js#L6和jax/events.js#L100。或者使用jQuery $('#canvas').offset()函数并完成它。：）

Answer 2

一般情况下，当您“取消投影”像[x，y，z，1]这样的剪辑空间点时，您将在从眼点发出的光线上获得一个点（在您的情况下，通过您点击的顶点）。 z的值将决定您在该光线上的位置。你几乎可以保证不会回到你点击的那一点。

所以你要做的就是计算那条光线（比如通过不投射两个点，如[x，y，0,1]和[x，y，1,1]并计算未投影点所在的线），然后测试哪些顶点位于该光线上。

修改：此外，您还要确保将world1的前三个坐标除以第四个坐标。

屏幕到javascript webgl中的世界坐标

2 个答案: