3DTools TrackballDecorator实现3D漫游
原文:3DTools TrackballDecorator实现3D漫游
1.基本原理
WPF提供的TrackballDecorator类用来实现三维漫游功能。TrackballDecorator可以看做是在Viewport3D后面的一个虚拟球面,当鼠标点击TraclcballDecorator投影在Viewport3D的这个平面内时,可以在球面上找到与鼠标在平面上面一一对应的一个点。当鼠标运动的时候,照相机根据鼠标的运动来旋转,以此来保证鼠标在这个虚拟球面上的位置是不变的。这样就完成了把把鼠标的二维运动转换为三维运动。下面以一个立方体为模型,简单说明一下上述过程。
图1.1 Viewport3D与TtackballDecorator位置关系
图1.2 鼠标垂直拖动
图1-2表示当鼠标进行垂直移动的时候,球面绕X轴进行旋转,来保证鼠标在球面上的位置是不变的,同时球面内的模型会跟随球面运动,就能得到预期的效果。
2.实现过程
对于每次鼠标移动,都需要计算一个旋转来保证鼠标在球面上的位置是不变的。因此需要做以下两个工作:首先,确定鼠标在球面上的位置;其次,计算鼠标从一个点移动到另一个点所进行的旋转。为了找到鼠标在球体上对应的点,将UIElement坐标系中的二维点投影到的Viewport3D内部的球面上。
(1)首先如何将二维点映射到Viewport3D内部球面呢?下面显示了两个坐标系。
2.1 二维坐标系
2.2 三维坐标系
如图2-1所示,鼠标显示了其在UIElement坐标系中的位置,原点(0,0)位于坐标系的左上角。在图2-2中把鼠标映射到Viewport3D内部的球面上,鼠标的坐标也变换为了三维坐标系中的坐标。
由于最终的目的是得到相机的旋转,因此可以选择最简单的TrackballDecorator球面坐标系,因此可以假定这个球面半径为1,其圆心为坐标系的原点(0,0,0)。只需要构建一个[0,0]—[2,2]的Viewport3D,然后将原点从左上角移动至中心,这样 ViewportsD 就变成了从[-1,1]一[1,-1]。如图 2-3,图 2-4 所示。
2.3 建一个宽、高为2的Viewport3D
2.4 将原点平移至中心
假设鼠标在UIElement坐标系的坐标为(Px, Py),在TrackballDecorator坐标系中的坐标为(x,y, z)那么可得出x,y点坐标如式2-1,2-2所示。
根据球面半径,就能得到Z坐标如式2-3所示。
获取三维坐标信息代码:
private Vector3D ProjectToTrackball(double width, double height. Point point)
{
double X = point.X / (width / 2);
double y = point. Y / (height / 2);
X = X - 1;
y = 1 - y;
double z2=l-x*x-y*y;
double z = z2 > 0 ? Math.Sqrt(z2): 0;
return new Vector3D(x, y, z);
}
这样就得到了鼠标在球面上的坐标(x,y,z)对于鼠标的每次拖动,都需要构建一个旋转,使得鼠标在球面上的位置保持不变。因此需要记录鼠标拖动之前的坐标,和鼠标拖动到当前位置的旋转。为了得到这个旋转需要计算旋转轴和旋转角度。
2.3用向量来描述鼠标的拖动
如图2.3所示向量VI和向量V2分别为原点到鼠标拖动前所在位置和拖动后所在位置的向量。可以简单计算得到旋转轴Axis和旋转角度0,如式2-4、2-5所示。
//根据右手定则,两向量叉乘,确定垂直两向量的轴,即旋转轴
Θ为球面的旋转角度,取Θ的相反数就得到了照相机的旋转角度,当有了旋转轴和旋转角度就可以控制的照相机去进行旋转。
//响应漫游
private void Track(Point currentPosition)
{
Vector3D currentPosition3D =ProjectToTrackball(
EventSource.Actual Width,EventSource.ActualHeight,
currentPosition);
Vector3D axis =Vector3D.CrossProduct(_previousPosition3D,
currentPosition3D);
double angle =Vector3D.AngleBetween(_previousPosition3D,
currentPosition3D);
Quaternion delta = new Quaternion(axis, -angle);
AxisAngleRotation3D r = _rotation;
Quaternion q = new Quatemion(_rotation.Axis, _rotation.Angle);
q*= delta;
_rotation.Axis = q.Axis;
_rotation.Angle = q.Angle;
_previousPosition3 D = currentPosition3D;
}
3.源代码
点击打开链接
3DTools TrackballDecorator实现3D漫游的更多相关文章
- OpenGL实现3D漫游的理解
这篇文章主要参考以下两篇博客: 推导相机变换矩阵 OpenGL系列教程之五:OpenGL矩阵类 上面的第一篇是理论的讲解,第二篇有实例代码,我在后面会给出自己写的主函数,依赖的类可以从第二篇参考中下载 ...
- 3D漫游的分类 3D Navigation Taxonomy
在2001年CHI发表的论文中1,Tan等人提出了一种对3D漫游的分类方法. 当时关于3D漫游(3D Navigation)的研究主要分为两种:一种是发掘有关漫游的认知原则,一种是开发一些具体的漫游技 ...
- 基于 H5 和 webGL 的 3d 智慧城市
前言 中共中央.国务院在今年12月印发了<长江三角洲区域一体化发展规划纲要>(下文简称<纲要>),并发出通知,要求各地区各部门结合实际认真贯彻落实. <纲要>强调, ...
- 轩辕展览-VR虚拟展厅设计如何实现全景漫游功能
什么是在线3d漫游?如何在VR虚拟展厅设计之中实现3d漫游功能?让我们来分享3dVR虚拟展厅的在线漫游. 实际上,在线3d漫游就是通过3d仿真场景,使用鼠标和键盘在虚拟空间之中自由漫游,它可以从高空俯 ...
- 软工1816 · 作业(十二)Beta答辩总结
组长博客 宣传视频 github团队项目仓库 本组成员 队员姓名与学号 124 王彬(组长) 206 赵畅 215 胡展瑞 320 李恒达 131 佘岳昕 431 王源 206 陈文垚 209 陈志炜 ...
- 软工1816 · Beta冲刺(6/7)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 推进Web端完成开发 推进修改一些后端接口的逻辑 着手制作视频 接下来的计划 ...
- 软工1816 · Beta冲刺(5/7)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 推进后端完成安卓端接口的开发 在测试中发现返回地图接口存在错误(待修复) 推进 ...
- 软工1816 · Beta冲刺(4/7)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 推进安卓端各个接口的开发,安卓端各个接口已经基本完成 完成食堂各个平面图的绘制 ...
- 软工1816 · Beta冲刺(3/7)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 协助后端完成历史记录接口.美食排行榜接口 完成食堂平面图的绘制 确定web端业 ...
随机推荐
- jQuery常用方法(持续更新)(转)
0.常用代码: 请容许我在1之前插入一个0,我觉得我有必要把最常用的代码放在第一位,毕竟大部分时间大家都是找代码的. (1)AJAX请求 $(function() { $('#send').click ...
- FreeMarker分页组件监听器
分页组件监听器 /* * project名: * 包 名: com.companyName.dhm.iepgm.common.taglib * 文 件名: PaginatedList ...
- GDB(十)--调试正在运行的进程
我编写了一个循环: long i; for (i = 0; i < 999999; i++) { mt.a += 1; sleep(1); }把它编译成a ...
- thinkphp3.2.3 自动验证 正则验证
<?php namespace Home1\Model; use Think\Model; class ShopYuyueInfoModel extends Model { // protect ...
- python高级学习目录
1. Linux介绍.命令1.1. 操作系统(科普章节) 1.2. 操作系统的发展史(科普章节) 1.3. 文件和目录 1.4. Ubuntu 图形界面入门 1.5. Linux 命令的基本使用 1. ...
- Java程序猿必知的10个调试技巧
在本文中,作者将使用大家经常使用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运行时上面. 在開始之前,推荐大 ...
- 从Ecipse中导出程序至apk 分类: H1_ANDROID 2013-10-26 22:17 516人阅读 评论(0) 收藏
若未有数字证书: 1. 2. 3. 4. 5. 若已有数字证书: 上面的后3步改为 版权声明:本文为博主原创文章,未经博主允许不得转载.
- ArcEngine数据编辑--选择要素
转自原文ArcEngine数据编辑--选择要素 好久没有写博文了,这段时间相对空闲一点,把AE数据编辑实现总结下. 要编辑要素,首先要选中要素,按shift键进行多选,按esc键清空选择. 个人了解的 ...
- js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
- js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...