首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >用鼠标在OpenGL中拖动三维点的最佳方法?

用鼠标在OpenGL中拖动三维点的最佳方法?
EN

Stack Overflow用户
提问于 2015-05-28 16:23:54
回答 2查看 4.7K关注 0票数 2

用鼠标抓取拖动三维点的最佳方法是什么。问题不是采摘,而是在3D空间中的拖动。

我认为有两种方法,一种是使用gluUnProject将视图转到世界坐标,并翻译3D点。这种情况下的问题是,它只存在于具有深度值的曲面上(使用glReadPixels),如果鼠标离开表面,则根据gluUnProject的winZ组件给出最大或最小深度值。但在某些情况下不起作用。

第二种方法是使用GL_MODELVIEW_MATRIX沿XY、XZ、YZ平面拖曳。但是这个例子的问题是,我们怎么知道我们在XY,XZ或者YZ飞机上?我们怎么知道轨迹球的正面是在XY平面上,如果我们想要拖到侧面而不是前面的平面上呢?

那么,有没有办法给我精确的二维到三维坐标,这样我就可以轻松地把三维点拖向各个方向,而不考虑平面的情况?一定有一些方法,我看过3D软件,他们有完美的拖动功能。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-05-28 18:28:24

我习惯于有些天真地解决这些用户交互问题(也许不是以数学上最优的方式),但“足够好”考虑到它们不是非常关键的性能(用户交互部分,不一定是对场景的修改)。

对于对象的不受约束的自由拖动,使用unproject描述的方法很好地工作,通常会提供接近像素的完美拖动,只需稍作调整:

..。您不需要使用glReadPixels来提取屏幕深度,而是希望在用户选择和/或选择时使用几何对象/网格的概念。现在,只需投影该对象的中心点,以获得屏幕深度。然后,您可以在屏幕X/Y中拖动,保持从这个投影得到的相同的Z,并取消项目以获得从前一个中心到新中心的转换增量来转换对象。这也使它“感觉”,就像你从物体的中心拖动,这往往是相当直观的。

对于自动约束的拖动,一种快速的检测方法是首先抓取一个“视面正常”。一种快速的方法(可能会使数学家皱眉)使用那些你习惯的投影/反投影函数,就是在屏幕空间中取消在视口中心的两个点(一个是近z值,另一个是远z值),在这两个点之间得到一个单位向量。现在你可以用点积找到最接近正常轴的世界轴。另外两个世界轴定义了我们想要拖着的世界飞机。

然后,简单地使用这些方便的非投影函数来获得鼠标光标的光线。在此之后,您可以执行重复的射线/平面交叉,因为您正在拖动游标,以计算一个从三角洲的翻译矢量。

对于更灵活的约束,gizmo (也称为机械手,基本上是3D部件)可以派上用场,这样用户就可以根据他选择/拖动的gizmo的哪个部分来指示他想要什么样的拖动约束(平面、轴、无约束等等)。对于轴约束,射线/线或线/线相交是方便的。

按照注释中的要求,从视口检索光线(C++-ish伪代码):

代码语言:javascript
运行
AI代码解释
复制
// Get a ray from the current cursor position (screen_x and screen_y).
const float near = 0.0f;
const float far = 1.0f;
Vec3 ray_org = unproject(Vec3(screen_x, screen_y, near));
Vec3 ray_dir = unproject(Vec3(screen_x, screen_y, far));
ray_dir -= ray_org;

// Normalize ray_dir (rsqrt should handle zero cases to avoid divide by zero).
const float rlen = rsqrt(ray_dir[0]*ray_dir[0] + 
                         ray_dir[1]*ray_dir[1] + 
                         ray_dir[2]*ray_dir[2]);
ray_dir[0] *= rlen;
ray_dir[1] *= rlen;
ray_dir[2] *= rlen;

然后,我们用鼠标光标得到的光线做一个射线/平面交点,以确定当用户开始拖动时,光线在哪里与平面相交(交点将给我们一个3D点)。在此之后,它只是在用户拖动鼠标时,在重复执行过程中收集到的点之间通过增量来转换对象。物体在沿平面约束移动时,应直观地跟随鼠标。

轴拖动基本上是相同的想法,但是我们把光线变成一条线,并做一条线/线的交点(鼠标对轴约束的线,给我们一个最近的点,因为这些线通常不会完全相交),给我们一个3D点,我们可以利用这个三角形沿着约束轴来转换对象。

请注意,有一些棘手的边缘情况涉及轴/平面拖动约束。例如,如果一个平面垂直于观察平面(或接近),它可以将物体发射到无穷远。同样的情况下,轴沿垂直线拖动,就像试图从前视图(X/Y视图平面)沿Z轴拖动一样。因此,在这种情况下,检测直线/平面垂直(或接近)并防止拖曳是值得的,但这可以在基本概念生效之后完成。

另一个值得注意的技巧是隐藏鼠标光标,以改善某些情况下的“感觉”。例如,有了axis约束,鼠标光标可能会变得离轴本身很远,而且看起来/感觉很奇怪。因此,我已经看到许多商业包只是隐藏鼠标光标在本例中,以避免显示鼠标和gizmo/句柄之间的差异,因此它会感觉更自然一些。当用户释放鼠标按钮时,鼠标光标被移动到手柄的视觉中心。请注意,您不应该对平板电脑执行隐藏游标拖动操作(它们是一个例外)。

这种拾取/拖放/交叉的东西很难调试,所以它值得在婴儿步骤中解决。为自己设定一个小目标,就像点击某个视口中的鼠标按钮来创建光线一样。然后你可以绕着它转,确保射线在正确的位置上产生。接下来,您可以尝试一个简单的测试,看看该射线是否与世界上的一个平面(例如X/Y)平面相交,并创建/可视化射线与平面之间的交点,并确保这是正确的。采取小的,耐心的婴儿步,自己的步调,你会有顺利,自信的进展。试着一次做太多事情,你可能会有非常令人沮丧的、令人不快的进展,试图找出你的错误所在。

票数 6
EN

Stack Overflow用户

发布于 2015-05-28 20:24:09

这是一个非常有趣的图集。与您描述的颜色标记方法一样,z缓冲区也是一种方法。在这里,对同一主题也进行了类似的讨论:

Generic picking solution for 3D scenes with vertex-shader-based geometry deformation applied

OpenGL - Picking (fastest way) How to get object coordinates from screen coordinates?

这也类似于已经讨论过的对象选择,包括它们的优缺点:http://www.opengl-tutorial.org/miscellaneous/clicking-on-objects/picking-with-an-opengl-hack/

实际上,我的答案是,没有唯一的最佳方法来做到这一点。正如你还提到的,他们有优点也有缺点。我个人喜欢暴饮暴食,因为它很容易,其结果是好的。此外,您不能使用屏幕空间在任何方向移动顶点,因为屏幕空间是2D的,并且没有唯一的方法将其映射回三维几何空间。希望它有帮助:)。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30519214

复制
相关文章
Flex2 用鼠标拖动控件
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" lay
用户3135539
2018/09/12
9510
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果。鼠标拖动图片,重新排列图片的排列顺序。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
超级小可爱
2023/02/20
7.9K0
JS实现鼠标拖动div移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript">
小小鱼儿小小林
2020/06/23
34.6K0
简单的鼠标可拖动DIV 兼容IE/FF
一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)
书童小二
2018/09/03
2.7K0
简单的鼠标可拖动DIV  兼容IE/FF
鼠标不能拖动文件的解决办法
  3.在电脑的最下方的任务栏中右键鼠标然后弹出一个对话框,然后在弹出的对话框中选择属性。属性对话框中选择【开始】菜单,然后选择自定义,弹出一个对话框,在其中找“启动上下文菜单和拖放”,然后选择这个按钮。所有的页面选择应用,然后尝试着拖放文件。一般在网页中按一些快捷键可能也会导致这种情况。
天天Lotay
2022/12/02
2.6K0
css实现鼠标划入显示拖动条
我们都必须串联相关生态,去思考有关hutool的问题。我们认为,找到抓手,形成方法论,hutool则会迎刃而解。互联网运营人员间有着这样的共识,做精细化运营,向目标发力,才能获得影响力。这让我明白了问题的抓手,互联网产品经理间有着这样的共识,如何强化认知,快速响应,是非常值得跟进的。这句话语虽然很短,但沉淀之后真的能发现痛点。互联网产品经理间流传着这样一句话,如何强化认知,快速响应,是非常值得跟进的。这不禁令我深思。我们认为,找到抓手,形成方法论,hutool则会迎刃而解。解决hutool的问题,首先要找到抓手。 所以,互联网产品经理间有着这样的共识,如何强化认知,快速响应,是非常值得跟进的。这不禁令我深思。互联网从业者间流传着这样一句话,只有适度倾斜资源,才能赋能整体业务。也许这句话就是最好的答案。互联网运营人员间流传着这样一句话,做精细化运营,向目标发力,才能获得影响力。也许这句话就是最好的答案。
阿超
2022/08/21
1.3K0
一个拖动鼠标写字的效果
根据提供的文章内容,这是一篇关于鼠标拖动写字效果的技术文章。文章首先介绍了该效果的实现原理和所需的HTML、CSS、JavaScript代码,然后提供了这个效果的演示和代码示例。文章还包含了如何提交代码以及该效果在浏览器中的实现细节。
练小习
2017/12/29
1.1K0
功能点方法在需求管理中的应用
  软件项目面临的一个普遍困难就是需求的不确定与频繁变更, 有效管理软件需求要解决的一个基本问题是确定变更的粒度大小以及对项目的影响程度。
软件造价评估联盟
2019/06/17
9060
功能点方法在需求管理中的应用
OpenGL(五)-- OpenGL中矩阵的变换OpenGL(五)-- OpenGL中矩阵的变换
通过模型矩阵,观察者矩阵(View Matrix),投影矩阵(Projection Matrix)三步矩阵变换后最终确定该展示怎样的图像。要注意的是矩阵的计算时从右往左的所以: result = 投影矩阵 * 观察者矩阵 * 模型矩阵。
用户8893176
2021/08/09
2.3K0
OpenGL(五)-- OpenGL中矩阵的变换OpenGL(五)-- OpenGL中矩阵的变换
【OpenGL】十一、OpenGL 绘制多个点 ( 绘制单个点 | 绘制多个点 )
在上一篇博客 【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 ) 中 , 讲解了绘制单个点的操作 , 本篇博客简单介绍下绘制多个点 ;
韩曙亮
2023/03/28
1.3K0
【OpenGL】十一、OpenGL 绘制多个点  ( 绘制单个点 | 绘制多个点 )
20.QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)
通过 QPainter 绘画实现,以本地图片985*740为例 如下图所示: 效果如下所示: 实现原理 主要通过以下函数实现: void QPainter::drawTiledPixmap ( int
诺谦
2018/05/28
4K0
Python+turtle交互式绘图:可以用鼠标拖动的小海龟
功能描述:代码运行后,在窗口上显示3个小海龟,使用鼠标拖动小海龟时可以动态改变窗口颜色,如下图所示。
Python小屋屋主
2019/12/17
1.6K0
Python+turtle交互式绘图:可以用鼠标拖动的小海龟
在 Flutter 中创建可拖动的浮动操作按钮[Flutter专题15]
Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。
徐建国
2021/12/07
5.8K0
在 Flutter 中创建可拖动的浮动操作按钮[Flutter专题15]
OpenGl 实现鼠标分别移动多个物体
原文链接:https://www.cnblogs.com/DOMLX/p/11620088.html
徐飞机
2019/10/06
2.7K0
WinForm 实现鼠标拖动控件跟随效果(图文)
1. 运行初始窗口如下: 2. 拖动后效果如下: 3. 代码如下: public partial class Form1 : Form { /* * 理解了下面的几个概念,就能完全
vv彭
2021/01/18
2.3K0
OpenGL与OpenGL在移动端的应用
OpenGL首先我们从字面意思来理解:Open Graphics Library,开放的图形库,图形库自然是处理图形的,所以简单来说OpenGL就是用来处理图形的一个三方库。 稍微技术流一点,作如下解释:是用于渲染2D,3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。
清墨
2019/11/15
2.7K0
OpenGL与OpenGL在移动端的应用
当鼠标按下时拖动元素,简单的JS实现
通过一个布尔值作为是否移动的标志,按下时为TRUE,代表跟随移动,鼠标松开为FALSE,代表不跟随移动,鼠标移动时改变元素偏移量。
房东的狗丶
2023/02/17
3.8K0
关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动总结
原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html
徐飞机
2019/11/01
1.3K0
三维点云分割综述(中)
在上篇文章中,我们介绍了关于点云的获取方式上的区别,点云的密度,以及各种场景下应用的区别,本篇文章将更加具体的介绍点云分割相关技术。
点云PCL博主
2020/08/10
3.4K0
三维点云分割综述(中)
WPF 在image控件用鼠标拖拽出矩形
今天有小伙伴问我一个问题,在image控件用鼠标拖拽出矩形,本文告诉大家如何使用鼠标画出矩形
林德熙
2018/09/19
1.3K0
WPF 在image控件用鼠标拖拽出矩形

相似问题

鼠标拖动的OpenGL翻译点

13

C++ OpenGL用鼠标拖动多个对象

14

如何用OpenGL绘制鼠标拖动上的连续点

12

用OpenGL在拖动鼠标上绘制不连续线

11

用C++和OpenGL拖动三维对象

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文