首页 > 专栏 > 计算机图形学 > 文章详情
WebGL 图形旋转的公式以及推导 发布于:2023-02-06 17:11:03   来源:李伟的博客   查看:51  讨论:0
一,旋转的概念3QQ易塔云建站-模板下载,web开发资源,技术博客
三维物体的旋转要比位移复杂一点,因为旋转要知道以下几点:3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
··· 旋转轴3QQ易塔云建站-模板下载,web开发资源,技术博客
··· 旋转方向3QQ易塔云建站-模板下载,web开发资源,技术博客
··· 旋转角度3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
想象一个场景,一个小人站在旋转轴的起点,进行旋转。3QQ易塔云建站-模板下载,web开发资源,技术博客
小人往左还是往右,就是旋转方向;3QQ易塔云建站-模板下载,web开发资源,技术博客
小人旋转的大小就是旋转的角度。3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
二,旋转方向的正负3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
何时为正,何时为父。3QQ易塔云建站-模板下载,web开发资源,技术博客
在WebGL中,除裁剪空间之外的大部分功能都使用了右手坐标系。3QQ易塔云建站-模板下载,web开发资源,技术博客
我们这里暂且将其视为右手坐标系。3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
image-202103151211029363QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
以上图为例3QQ易塔云建站-模板下载,web开发资源,技术博客
··· 当物体绕z 轴,从x轴正半轴向y轴正半轴逆时针旋转时,是正向旋转,反之为负。3QQ易塔云建站-模板下载,web开发资源,技术博客
··· 当物体绕x 轴,从y轴正半轴向z轴正半轴逆时针旋转时,是正向旋转,反之为负。3QQ易塔云建站-模板下载,web开发资源,技术博客
··· 当物体绕y 轴,从z轴正半轴向x轴正半轴逆时针旋转时,是正向旋转,反之为负。3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
如下图,是正向旋转3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
三,旋转公式3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
先举一个让顶点围绕z 轴旋转的例子。3QQ易塔云建站-模板下载,web开发资源,技术博客
3QQ易塔云建站-模板下载,web开发资源,技术博客
image-202101061420314473QQ易塔云建站-模板下载,web开发资源,技术博客
 

已知:3QQ易塔云建站-模板下载,web开发资源,技术博客

··· 点A的位置是(ax,ay,az)3QQ易塔云建站-模板下载,web开发资源,技术博客
···点A要围绕z轴旋转β度,转到点B的位置

求:点A旋转后的bx、by位置3QQ易塔云建站-模板下载,web开发资源,技术博客

解:3QQ易塔云建站-模板下载,web开发资源,技术博客

我们由结果逆推一下解题思路。3QQ易塔云建站-模板下载,web开发资源,技术博客

因为∠β是已知的,∠α 可以通过点A 得出。3QQ易塔云建站-模板下载,web开发资源,技术博客

所以我们可以得出:3QQ易塔云建站-模板下载,web开发资源,技术博客

∠xOB=α+β3QQ易塔云建站-模板下载,web开发资源,技术博客

那我们通过三角函数就可以推出bx、by3QQ易塔云建站-模板下载,web开发资源,技术博客

设∠xOB=θ,则:3QQ易塔云建站-模板下载,web开发资源,技术博客

bx=cosθ*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客
by=sinθ*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客

上面的|OA|是点O到点A的距离,可以直接用点A求出:3QQ易塔云建站-模板下载,web开发资源,技术博客

|OA|=Math.sqrt(ax*ax+ay*ay)3QQ易塔云建站-模板下载,web开发资源,技术博客

那我们接下来只需要知道cosθ和sinθ的值即可3QQ易塔云建站-模板下载,web开发资源,技术博客

3QQ易塔云建站-模板下载,web开发资源,技术博客
因为:3QQ易塔云建站-模板下载,web开发资源,技术博客

θ=α+β3QQ易塔云建站-模板下载,web开发资源,技术博客

3QQ易塔云建站-模板下载,web开发资源,技术博客
所以,我们可以利用和角公式求cosθ和sinθ的值:3QQ易塔云建站-模板下载,web开发资源,技术博客

cosθ=cos(α+β)3QQ易塔云建站-模板下载,web开发资源,技术博客
cosθ=cosα*cosβ-sinα*sinβ3QQ易塔云建站-模板下载,web开发资源,技术博客
sinθ=sin(α+β)3QQ易塔云建站-模板下载,web开发资源,技术博客
sinθ=cosβ*sinα+sinβ*cosα3QQ易塔云建站-模板下载,web开发资源,技术博客

3QQ易塔云建站-模板下载,web开发资源,技术博客
所以:

bx=cosθ*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客
bx=(cosα*cosβ-sinα*sinβ)*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客
bx=cosα*cosβ*|OA|-sinα*sinβ*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客
by=sinθ*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客
by=(cosβ*sinα+sinβ*cosα)*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客
by=cosβ*sinα*|OA|+sinβ*cosα*|OA|3QQ易塔云建站-模板下载,web开发资源,技术博客

3QQ易塔云建站-模板下载,web开发资源,技术博客
因为:

cosα*|OA|=ax3QQ易塔云建站-模板下载,web开发资源,技术博客
sinα*|OA|=ay3QQ易塔云建站-模板下载,web开发资源,技术博客

3QQ易塔云建站-模板下载,web开发资源,技术博客
所以我们可以简化bx、by的公式

bx=ax*cosβ-ay*sinβ3QQ易塔云建站-模板下载,web开发资源,技术博客
by=ay*cosβ+ax*sinβ
3QQ易塔云建站-模板下载,web开发资源,技术博客

3QQ易塔云建站-模板下载,web开发资源,技术博客
上面的bx、by就是我们要求的答案。

评论

  • 匿名