【OpenGL】杂谈一、通过鼠标拖拽实现相机绕空间中的某点进行球面旋转查看

这篇具有很好参考价值的文章主要介绍了【OpenGL】杂谈一、通过鼠标拖拽实现相机绕空间中的某点进行球面旋转查看。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 前言

这是我最近遇到的一个问题,如题所示,我需要通过鼠标拖拽实现相机绕点的球面旋转,原本的想法很简单,类似笔记八、摄像机中提到的那样,从聚焦中心点的视角出发,将鼠标移动的距离xoffset和yoffset转换为yaw和pitch角,然后计算出该视角的向量,与球面求交从而得到相机的当前位置,但是实际过程中出现了一个比较严重的问题,就是欧拉角的致命缺陷——万向锁,如果pitch角超过±90°,我们就会遇到各种问题,在设计第一视角时我们可以控制pitch角在90°到-90°之间,这不影响我们的体验,但是如果我们要控制相机进行球面旋转的话,这样偷懒可能就不对了,那么能不能有别的方法来实现这种效果呢?当然是有的,一种是四元数,它可以实现球面旋转的平滑插值过渡,但是今天我要介绍另一种更为直观的实现方法

2. 相机的球面旋转

(代码基于笔记九、相机类修改)
同样的,我们需要记录每次鼠标移动的距离xoffset和yoffset,这两个值该怎么去运用呢?
【OpenGL】杂谈一、通过鼠标拖拽实现相机绕空间中的某点进行球面旋转查看
可以画出示意图:
【OpenGL】杂谈一、通过鼠标拖拽实现相机绕空间中的某点进行球面旋转查看
其中A和B是相机移动前后的点,O点是我们相机的聚焦点,那么现在要做的事就很明显了,原本相机的视角是平行的圆面,我们把它看作投影平面,而移动相机时,我们是在OAB形成的圆面上移动,那么我们的任务就是利用OA求得OB

首先我们计算出OA向量,求出当前的旋转半径

	void updateCameraVectors()
    {
        if (xoffset == 0 && yoffset == 0)
            return;
        glm::vec3 target, offset;
        target = Position - Front;
        double radius = glm::length(target);
        target = glm::normalize(target);

之后我们将当前相机向上方向与OA向量叉乘得到投影面的右向量

        Right = glm::normalize(glm::cross(Up, target));

其次再用OA向量与求得的叉乘得到投影面的上向量

        Up = glm::normalize(glm::cross(target, Right));

然后我们求屏幕位移在投影面上对应的向量AB(将投影面的右向量与上向量分别乘以xy位移值并相加)

        offset = Up * yoffset + Right * xoffset ;

之后我们将位移的的弧长转换为OAB圆的弧度并取负,保证物体的相对旋转方向与鼠标推拽方向一致(相机旋转方向与鼠标位移方向相反)

        double len = glm::length(offset);
        double angle = -len / radius;
        offset = glm::normalize(offset);

最后我们计算新的target向量OB = (OAcos(OAB)+ABsin(OAB)),并将它乘以半径的长度加在聚焦点,从而得到我们的相机位置

        double cr = cos(angle) * radius, sr = sin(angle) * radius;
        Position = Front + glm::vec3(target.x * cr + offset.x * sr, target.y * cr + offset.y * sr, target.z * cr + offset.z * sr);
	}

3.效果

【OpenGL】杂谈一、通过鼠标拖拽实现相机绕空间中的某点进行球面旋转查看文章来源地址https://www.toymoban.com/news/detail-431091.html

到了这里,关于【OpenGL】杂谈一、通过鼠标拖拽实现相机绕空间中的某点进行球面旋转查看的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • selenium实现鼠标拖拽

    HTML片段 selenium实现片段 xoffset,yoffset范围是控件大小,如果input大小是自适应,xy范围就会随着浏览器界面放大缩小改变 假设input长度为len像素 xoffset范围为[-len/2,len/2],超过这个范围折算为两个端点 yoffset同理 被控制元素需要在电脑桌面可见,也就是说,不能需要滑动滚轮才能

    2024年02月11日
    浏览(39)
  • Baumer工业相机堡盟工业相机如何通过BGAPISDK复制内存空间存储图像数据序列(C#)

    Baumer工业相机堡盟相机是一种高性能、高质量的工业相机,可用于各种应用场景,如物体检测、计数和识别、运动分析和图像处理。 Baumer的万兆网相机拥有出色的图像处理性能,可以实时传输高分辨率图像。此外,该相机还具有快速数据传输、低功耗、易于集成以及高度可扩

    2024年02月11日
    浏览(42)
  • Unity实现鼠标拖拽多物体(拖拽单物体的拓展)

    学习了B站UP主OneCredit【Unity快速教学】鼠标拖曳甩动物件BV1qK4y1d7iZ的教学视频后 拓展了一下功能,实现多个物体也可以拖拽,互不受影响 主要是做了一个检测,在鼠标上物体才能被拖拽 目录 bool Drag 拖拽物体的实现 解决摄像机视角的影响 绑定刚体,写好需要用到的变量 Dr

    2024年03月24日
    浏览(61)
  • vue项目实现鼠标拖拽功能

    当鼠标按下鼠标移动的时候,记录移动中的 x、y 值,那么这个被拖拽的 dom 的 top 和 left 值就是: top=鼠标按下时记录的 dom 的 top 值+(移动中的 y 值 - 鼠标按下时的 y 值) left=鼠标按下时记录的 dom 的 left 值+(移动中的 x 值 - 鼠标按下时的 x 值)  

    2024年02月11日
    浏览(46)
  • unity实现鼠标拖拽物品移动

    unity实现物品拖拽,3D创景需要注意的是一个屏幕坐标转换为世界坐标和世界坐标转换屏幕坐标,熟悉他们之间的转化,就没什么难度了 从摄像机发射一条射线,通过射线检测到鼠标点击的物体,将物品的世界坐标转换为屏幕坐标 将鼠标的位置为,鼠标点击的XY轴和物品的

    2024年02月11日
    浏览(84)
  • vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动

    第一种,按住鼠标拖拽滚动 以下代码项目中直接使用即可,此种方法是通过鼠标拖拽进行滚动,滑动滚轮无效果。 当然快捷键,shift+鼠标滚轮可以控制横向滚动,对用户来说体验不友好。 css代码 第二种方法是通过鼠标的滚轮进行滚动 css代码

    2024年02月11日
    浏览(47)
  • JS创建DIV,实现鼠标拖拽效果

    题目:用原生js动态创建一个div,大小随意,挂在body上,实现鼠标拖拽效果 需要用到的鼠标事件: 1.鼠标按下(onmousedown), 2.鼠标移动(onmousemove) 3.鼠标抬起(onmouseup) 第一步:创建容器(每个页面,最大的容器是body对象,所有dom对象创建后默认都会放到body) 第二步,

    2024年02月13日
    浏览(49)
  • js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)

    该功能的需求点事2个月前的一个需求,当时采用的是Element-UI中的image图片做的一个功能,但是不能满足产品真实的需求,只能定制化自己封装。 该功能在Vue2 的element-UI中还是比较鸡肋的 ⬇️ ⬇️ Element-UI 该功能在Emenent-UI-plus(vue3)版本已经很好的支持了。 完整功能如下

    2024年02月03日
    浏览(86)
  • Compose使用OpenGL+CameraX快速实现相机“拍视频实时滤镜“、”拍照+滤镜“

    一、前言 短视频热潮还没有褪去,写这篇文章主要是帮助大部分人,能快速上手实现类似效果,实际上是: CameraX拿相机数据,OpenGL给CameraX提供一个Surface,数据放到OpenGL渲染的线程上去做图像相关操作 OpenGL滤镜来自 aserbao_AndroidCamera 视频录制核心代码参考改造自 Google 的 g

    2023年04月17日
    浏览(47)
  • vue实现 图片拖拽及鼠标滚轮放大缩小

    效果: 代码实现

    2024年02月14日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包