问题标签 [mouse-picking]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
4358 浏览

c++ - 在 OpenGL 中通过鼠标拾取在 3D 空间中拖动 3D 点的最佳方法?

用鼠标选择拖动 3D 点的最佳方法是什么。问题不在于拾取,而在于在 3D 空间中拖动。

我在想有两种方法,一种是使用 gluUnProject 获取 View to World 坐标并转换 3D 点。这种情况下的问题是,它仅在具有深度值(使用 glReadPixels)的表面上,如果鼠标离开表面,它会根据 gluUnProject 的 winZ 组件给出最大或最小深度值。在某些情况下它不起作用。

第二种方法是使用 GL_MODELVIEW_MATRIX 沿 XY、XZ、YZ 平面拖动。但是在这种情况下的问题是,我们怎么知道我们在 XY 或 XZ 或 YZ 平面上?我们怎么知道轨迹球的前视图在 XY 平面上,如果我们想在侧平面而不是前平面上拖动呢?

那么,有什么方法可以为我提供准确的 2D 到 3D 坐标,以便我可以在不考虑平面情况的情况下轻松地在各个方向拖动 3D 点?一定有一些方法,我看过3D软件,它们有完美的拖动功能。

0 投票
2 回答
1585 浏览

opengl - OpenGL 光线投射(拾取):考虑对象的变换

对于拾取对象,我实现了一种类似于此处描述的光线投射算法。将鼠标单击转换为射线(具有原点和方向)后,下一个任务是将该射线与场景中的所有三角形相交以确定每个网格的命中点。

我还实现了基于此处描述的三角形相交测试算法。我的问题是,我们应该如何在执行交叉时考虑对象的变换?显然,我不想将变换矩阵应用于所有顶点,然后进行交集测试(太慢)。

编辑:
这是我正在使用的 UnProject 实现(顺便说一下,我正在使用 OpenTK)。我比较了结果,它们与GluUnProject给我的结果相匹配:

然后我使用这个函数来创建一条射线(有原点和方向):

0 投票
2 回答
532 浏览

opengl - 如何从 2D 屏幕鼠标单击 OpenGL 中的大型对象获得准确的 3D 深度?

我正在通过 2D 屏幕鼠标单击计算 3D 坐标。然后我在计算的 3D 坐标处绘制点。代码没有错,方法没有错,一切正常。但是有一个问题与深度有关。

如果对象大小在 (1000, 1000, 1000) 左右,我会得到完整的深度,即对象面元的精确 3D 坐标。但是当我加载大小为(20000、20000、20000)的对象时,我没有得到准确的(深度)3D 坐标。我从表面得到一些偏移。该点与表面有一些偏移。所以我的第一个问题是为什么会这样?第二个问题是如何获得超大型物体的完整深度和准确的 3D 坐标?

我画了一个 3D 点

并使用

0 投票
1 回答
1379 浏览

opengl - 使用 glRenderMode(GL_SELECT) 和 glReadPixels 在 OpenGL 中拾取

我正在尝试在 opengl 中进行选择,但它不起作用。我绘制从.obj文件中收到的对象(v、vn、f、o 和此类索引)。每个对象都由“组”组成,每个组都是一组GL_POLYGON. 这是绘制函数:

绘图工作正常,我在屏幕上看到对象。

这是所有的拣货程序

单击鼠标时调用该pick函数(使用opengl鼠标函数)。我收到的错误是单击对象时似乎没有击中任何对象。

我正在使用带有 Opengl 3.0 的 Ubuntu 14.04 LTS

我不知道如何问或具体问什么,如果您发现有问题,我将不胜感激。

0 投票
1 回答
24 浏览

usability - 软件可用性:用鼠标选择

我正在设计一个带有可挑选对象的基于画布的软件。用户交互由基于自定义状态机的系统执行。我需要指定选择过程,但我需要一些关于用户应该如何选择对象的建议或最佳实践。作为要求,我需要通过 LeftMouseDown 实现选择,并通过 Ctrl + LeftMouseDown 实现多选。例如:在Windows 8 OS中,桌面图标的选择是在LeftMouseDown上进行的,而多选是在LeftMouseUp上进行的(我不知道为什么)。是否有任何过程或状态机的描述,这些过程或状态机在标准基础上控制用户与鼠标拾取对象的交互?

0 投票
0 回答
432 浏览

javascript - Three.js boids - improving mouse detection with a changing camera position

I've been working with three.js examples of boids/flocks for some time, but both the canvas one and the webgl/shaders one have a flaw: the mouseOver event (which "disturbs" birds and triggers a repulsion) only works when camera.position = {x: 0, y: 0,: whatever}.

I've tried to improve that in the canvas example (easier to my eyes) by editing this part:

And trying something like:

But this can't work, the unprojected vector could only be used with a raycaster to find objects intersecting its path. In our case, the repulsion effect must work at 150 distance, according to boid.repulse:

So I'm stuck. Should I find a way to widen the raycaster so it's like a 150-wide cylinder for mouse picking? Or is there a way to unproject the vector then re-project it on the plane nearest to the bird, so to calculate the distance? (but what about performance with 200+ birds? )

If the solution can only come from shaders, feel free to tell me to create another topic.

Included: jsfiddle of the canvas example with a slightly moved camera.

0 投票
3 回答
1633 浏览

opengl - 使用选择框选择 3D 表面(以两种不同的方式)

我正在创建一个建模软件。我的模型都是由平面多边形组成的,它们只是我用 OpenGL 显示的一组有序的顶点。我已经做了很多搜索,令我惊讶的是,我没有找到很多关于我正在寻找的应用程序的信息。

我正在尝试使用矩形框来选择曲面。这听起来很简单,但我希望它的工作方式与此方法在许多程序中的工作方式相同。这些是我正在寻找的要求:

  1. 我想要一个从左边开始向右走的矩形,只选择那些完全包含在框内的对象。
  2. 从右边开始向左走的矩形应该选择任何被触摸的表面(它不必完全封闭。
  3. 应选择矩形中/接触矩形的所有对象。换句话说,我想选择是否可见的对象。所有适合盒子的东西,即使被另一个表面覆盖,仍然应该被选中。

名单上的第 3 位是最重要的。最好同时拥有选项 1 和 2,但如果证明实施它们过于困难,我只能接受其中一个。

我查看了有关 3D 拾取的各种其他帖子,似乎大多数建议颜色拾取或光线投射。我将颜色拾取用于正常单击选择,但因为我希望框选择包括不可见的表面,所以这不是一个选项。似乎光线投射仅适用于单击点而不是框。那么有没有其他方法可以相当简单地实现我的目标?我认为这将是一项相当普遍的任务,因为它似乎存在于许多建模软件中,但不幸的是我一直无法找到适合我需要的方法。

算法的伪代码将受到赞赏,但不是必需的。至少我正在寻找一种我能够自己研究并找到一些例子的方法;我根本不知道该看的地方。

0 投票
1 回答
87 浏览

opengl - 试图让鼠标选择工作,但不知道我迷路了

我在深度为 0 处绘制了一个 10x10 的正方形网格,并试图突出显示鼠标所在的那个。我试过按照这里的教程:http: //antongerdelan.net/opengl/raycasting.html 但我不知道我是否做对了。最后我得到了一个向量,但我不确定如何处理它。

这是正方形的屏幕截图(不知道它有什么帮助..)

http://postimg.org/image/dau330qwt/2

使用 BDL 评论中的代码进行了更新。我现在得到的输出是:

归一化鼠标位置 0.087500 x 0.145833 世界射线:0.065083、0.081353、499.000000 世界射线:0.000130、0.000163、1.000000 鼠标世界 -0.006521、-0.008152

我希望“鼠标世界”线的数字在 1-10 范围内,而不是在 .00x 范围内,不过,根据上面的屏幕截图显示 x 和 y 范围为 0-10 的正方形网格。

感谢您的关注。

0 投票
1 回答
981 浏览

three.js - gpu 拾取 - 精灵周围的不可见像素

我正在渲染一个包含精灵的采摘场景。当我的光标靠近精灵时,它会注册为一种颜色并被“选中”。当您放大精灵时,这个不可见的边框会变大。

打开您的控制台以查看实时打印的 ID。将光标移近和远离大小精灵。您会看到精灵在不可见的边框上被选中。这种行为不会发生在常规几何体上,只会发生在 sprite 上。

这很奇怪,因为我正在渲染renderer.readRenderTargetPixels实际看到的内容。

我怎样才能摆脱不可见的边界以便更准确地挑选?

在此处输入图像描述

0 投票
1 回答
4865 浏览

javascript - Cesium:选择实体并检索 WMS 的信息

我开发了一个建筑物的 3D 查看器。我现在要添加的是在建筑实体下方选择 WMS(Web 地图服务)的内容。

基本上,我希望能够在用户左键单击的位置选择建筑物。建筑物的颜色应该改变(有效)。我想在用户点击的位置检索 Web 地图服务的信息。

到目前为止,这是我编写的代码:

但是,我的变量“info”保持未定义,而我希望它返回一个数组。