2d,3d中旋转推导

二维绕原点旋转,其实点为(x,y),旋转角度为黄色标注的角度。

推导过程如下:

x‘ = r cos(al+be);

y‘ = r sin(al+be);
x ‘= rcosalcosbe-rsinalsinbe;
y‘= rsinalcosb+rcosalsinbe;
又因为rcosal= x; rsinal=y;
所以x‘=xcosbe-ysinbe; y‘=xsinbe+ycosbe

即为求的的旋转后坐标为(xcosbe-ysinbe,xsinbe+ycosbe);

3d中旋转(摘自网络中博客)

开始的时候,自己很难推导出来,一是自己空间几何不怎么样,而是自己不会思考动脑。 以前看书不太懂,现在看其实自己在推导过程中对单位向量没有吃透,很多过程中都需要单位向量和长度来计算一个向量,以前没有意思到。3d推导确实复杂些,但也没有那没复杂的理解不了。

左手坐标系下,一点绕任意轴旋转θ角的右乘矩阵:

其中C为cosθ,S为sinθ,A为单位化的旋转轴

以下推导均为左手坐标

首先我们将P看成从原点出发的自由向量,将其分解为平行于轴A与垂直于轴A的分量A1,A2的形式:

    (公式1)

如图2:

图2

                        (公式2)

              (公式3)

由于平行分量A1在旋转过程中保持不变,问题就在于垂直分量A2。先将A2旋转θ度后(A3)再加上A1就可以得到最终的旋转结果。如图3:

图3蓝色的点为P点旋转θ度后的位值

旋转后的位置点P'为:

   (公式4)

因为A2到A3的旋转是在垂直于A轴平面内进行的,所以可以将A3分解为A2与A2逆时针方向旋转90度的向量A4上的两个分量的形式。如图4:

图4

下面我们来求A4
A2可以看成φ的对边,如图5:

图5

A2的长度为:

   (公式5)

我们想要的向量A4正好为:

   (公式6)

    (公式7)

因为A为单位向量所以(公式7)与(公式5)相等,这样长度相等并且同时垂直于A1,A2,所以就是我们要求的A4。

接下为求A3,我们用一个垂直于A的平面图来看一下,这样更直接,如图6:

图6

A2'与A4'分别为A3在A2与A4上的分量。

   (公式8)

   (公式9)

 (公式10)

因为:A2,A3,A4的长度都相等所以上面的两式化简为:

   (公式11)

   (公式12)

将以上公式代入到(公式4)中计算最终结果:

整理后得:

   (公式13)

设:

写成矩阵的形式为:

   (公式14)

   (公式15)

   (公式16)

代入(公式13)得:

最终齐次的旋转矩阵为:

   (公式17)

时间: 2024-11-06 11:43:29

2d,3d中旋转推导的相关文章

html中2D,3D效果的实现

2D 2D就是平时看到的平面,就是在屏幕上水平和垂直的交叉线X轴Y轴. 2d中的位移属性:transform:translate(参数1,参数2) 参数1:在X轴上移动的距离(正值右移,负值左移)参数2:在Y轴上移动的距离(正值下移,负值上移) 也可以单独设置XY轴,transform:translateX(),transform:translateY(). 2d中的缩放属性:transform:scale(参数1,参数2) 参数在0~0.9999中为缩小,大于1放大,参数1:水平缩小放大 参数

jQuery可拖拽3D万花筒旋转特效

jQuery可拖拽3D万花筒旋转特效 这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript

CSS自学笔记(13):CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)

css3-实现3D立方体旋转

核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. 实例:        创建大小两个盒子,小盒子放在大盒子里面,通过3D立体定位调整各自的位置,呈现一个立方体的现状:然后定义鼠标移入后的动画帧事件.实现如下效果图一样的模型. HTML: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

3D数学读书笔记——3D中的方位与角位移

本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/25339595 方位和角位移的基本概念 什么是方位.角位移? 直观的说,我们知道,物体的"方位"主要描写叙述物体的朝向,然而,"方向"和"方位"并不全然一样.向量有"方向"但没有"方位",差别在于,当一个向量指向特定方向时,能够让向量自转

从零开始打造一个Android 3D立体旋转容器

本文地址,转载请注明 http://blog.csdn.net/mr_immortalz/article/details/51918560 嗯,2个月没有写博客,是要好好反省下,趁着放暑假把这两个月看的东西好好沉淀下.嗯,就立下这个Flag,希望不要自己再打自己脸. 1.概述 回到正题,这次带来的效果,是一个Android 的3D立体旋转的效果. 当然灵感的来源,来自早些时间微博上看到的效果图. 非常酷有木有!作为程序猿我当然要把它加入我的下一个项目中啦! 原效果 我们实现的效果: (为了更加可

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效.该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷. 在线预览   源码下载 使用方法 HTML结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面.幻灯片的上下导航按钮使用的是radio单选按钮和label来制作.整个3D立方体幻灯片被包裹在一个div容器中. 1 2 3 4 5 6 7 8 9 10 11

Unity 3D中的Transform.Rotate 与Transform.RotateAround 的区别

Transform.Rotate 旋转 应用一个欧拉角的旋转角度,eulerAngles.z度围绕z轴,eulerAngles.x度围绕x轴,eulerAngles.y度围绕y轴(这样的顺序). 如果相对于留空或者设置为Space.Self 旋转角度被应用围绕变换的自身轴.(当在场景视图选择物体时,x.y和z轴显示)如果相对于 Space.World 旋转角度被应用围绕世界的x.y.z轴. 1 gameObject.transform.Rotate(new Vector3(0,1,0),Inpu

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l