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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

评论

  • 匿名