Three.js 学习笔记 (1) - 坐标系和旋转
前言
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.(该项目的目标是创建一个易于使用,轻量级的3D库。该库提供了<canvas>,<svg>,CSS3D和WebGL渲染器。)
示例 - 文档 - Wiki - 迁移 - 帮助
官网:https://threejs.org
Github:https://github.com/mrdoob/three.js
学习THREE.JS,可以从《three.js开发指南》开始,有中文电子文档PDF。电子文档代码:https://github.com/josdirksen/learning-threejs。
1、3D空间的坐标体系
在threejs中,xyz轴的坐标如图所示,X轴红色,Y轴绿色,Z轴蓝色。
http://www.cnblogs.com/silent-stranger/p/6307372.html
1.相机坐标系(Camera Space)
有一个比较特殊的物体坐标系就是相机坐标系,这个坐标系是我们的视点用来渲染看到的场景所用的坐标系。在相机坐标系中,相机一直处于相机坐标系的原点,+x的方向是向右的,+z的方向是向前的(向屏幕里的方向,因为使用的是左手坐标系),+y的方向是向上。这里的像上不是世界坐标的正上,而是一个相机的上方向。可以来看一下这个相机坐标系的图片。
这里要注意一些细节,相机的坐标是三维空间,而我们在屏幕上看到的是二维的。
因为我们是做了一个映射,把三维空间的东西映射到了一个二维的平面上,这个映射就是大家知道的“投影”了。
2、二维平面旋转公式
1 x1=Math.cos(angle)*x-Math.sin(angle)*y; 2 y1=Math.cos(angle)*y+Math.sin(angle)*x; 3 //其中x,y表示物体相对于旋转点旋转angle的角度之前的坐标, 4 // x1,y1表示物体旋转angle后相对于旋转点的坐标
从数学上来说,此公式可以用来计算某个点绕另外一点旋转一定角度后的坐标,
例如:A(x,y)绕B(a,b)旋转β度后的位置为C(c,d),则x,y,a,b,β,c,d有如下关系式:
1。设A点旋转前的角度为δ,则旋转(逆时针)到C点后角度为δ+β
2。求A,B两点的距离:dist1=|AB|=y/sin(δ)=x/cos(δ)
3。求C,B两点的距离:dist2=|CB|=d/sin(δ+β)=c/cos(δ+β)
4。显然dist1=dist2,设dist1=r所以:
r=x/cos(δ)=y/sin(δ)=d/sin(δ+β)=c/cos(δ+β)
5。由三角函数两角和差公式知:
sin(δ+β)=sin(δ)cos(β)+cos(δ)sin(β)
cos(δ+β)=cos(δ)cos(β)-sin(δ)sin(β)
所以得出:
c=r*cos(δ+β)=r*cos(δ)cos(β)-r*sin(δ)sin(β)=x*cos(β)-y*sin(β)
d=r*sin(δ+β)=r*sin(δ)cos(β)+r*cos(δ)sin(β)=y*cos(β)+x*sin(β)
即旋转后的坐标c,d只与旋转前的坐标x,y及旋转的角度β有关
从图中可以很容易理解出A点旋转后的C点总是在圆周上运动,圆周的半径为|AB|,利用这点就可以使物体绕圆周运动,即旋转物体。
3、三维空间旋转公式
【转】https://www.cnblogs.com/silent-stranger/p/6027266.html
二维空间的旋转可以看作是围绕点的旋转,只有一个*度。而三维空间的旋转是围绕一条线旋转的。当旋转的轴是Z轴时,旋转可以看作是在二维平面XY平面的旋转,旋转的中心点是P(x=0,y=0)。按照右手法则,让拇指指向Z轴的正方向,四指指向为旋转的正方向。按照Y轴和X轴的旋转也类似。按照不同的轴的旋转可以进行组合。比如,先按照Z轴旋转45度,再按照Y轴旋转45度。但是每一个朝向都可以看成是物体在原始位置处围绕某一个轴转动了一个角度形成的。
三维空间的旋转有多种方式,如旋转矩阵,欧拉角,四元数:
1.欧拉角(Euler Angle)
欧拉角这种旋转方式是最直观的,因为这种方式是将旋转表示为物体按坐标系的三个轴X(1,0,0) ,Y(0,1,0),Z(0,0,1)的旋转组合成的。这里首先要明确两个概念,1参考系:类似于物理中的参考系,是静止不动的,比如北极星,不管在那里,那就是北。2坐标系:坐标系是固定于物体的,随着物体的转动而发生变化,最简单的例子就是左右,人所说的左边一直是根据人所面对的方向来决定的。在下图中蓝色为参考系的三个轴,而红色是物体的坐标系的三个轴。虽然说欧拉角表示的旋转是有多个沿坐标轴的旋转组合而成的。但是旋转的顺序不同旋转就不同,所以,欧拉角中旋转的顺序要注明。这里的三个角是zxz顺规的欧拉角。物体先绕Z轴旋转了α°,然后物体坐标系的x轴的位置变化到了图中N的位置,然后绕这个N轴(X轴)旋转β°,最后再沿Z轴旋转γ°。
欧拉角的旋转虽然是最直观的,但是却存在一个非常致命的问题--万向节锁,大致是指。按某一个旋转了90°的时候会使另外两个轴重合,从而丧失一个*度。无法很好的追踪物体。具体的可以看一下这个视频万向节锁。讲得非常清楚,这里也就不再赘述了。
欧拉角旋转应用于很多第一人称3D游戏中,虽然万向节锁是无法避免的,但可以将触发的概率减至最小。只有当人物视线完全朝上或者朝下的时候才会触发万向节锁。
2.旋转矩阵(Rotation Matrix)
三维空间的旋转使用旋转矩阵的方式表示比较容易,旋转矩阵是一个3x3的矩阵。可以看作物体沿空间中的某一个轴(x,y,z)旋转了θ°。三维的旋转矩阵可以表示为:
其中:c=cos(θ) , s=sin(θ),t=1-cos(θ)
假设物体在初始位置的旋转矩阵为A ,经过旋转之后的旋转矩阵为A` ,那么A,A`以及R之间的关系可以表示为 A` = AR。
3.四元数(Quaternion)
四元数是一种高阶复数,四元数q表示为:q =(x,y ,z ,w)=xi+y j+z k+w 可以将四元数写成一个向量和一个实数的组合。q =(v ⃗ +w)=((x,y ,z ),w) ,四元数也可用矩阵表示。
可以证明这个矩阵和旋转矩阵是一个矩阵。
在数学上四元数来表示的旋转要好一些,但是在程序设计里,旋转矩阵更方便。在Three.js中使用四元数的方式也是将四元数换成了旋转矩阵使用的。
4、Three.JS中的旋转实现
three.js支持上面所说的三种旋转方式。
1.欧拉角
three.js中场景里的物体都属于Object3D这个类。这个类中有表示物体朝向的一个属性–rotation,这是一个欧拉类型的值,有三个轴旋转的角度,单位是π,还有一个旋转的顺序组成。要使物体旋转可以改动这个rotation的值。比如让物体按Y轴正方向旋转45°可以写成 object3D.rotation.y+=0.25*Math.PI。这里的旋转顺序默认使用的是‘XYZ’顺序。另外Object3D 还提供了几个方法来进行旋转,rotateX(angle),rotateY(angle),rotateZ(angle),分别是按照X,Y,Z轴的正反向旋转一个角度。但具体使用的时候和 object3D.rotation.y+=0.25*Math.PI 这种方式还是有一些区别的。另外还有一个方法是rotateOnAxis(axis,angle) 可以指定旋转的轴,这里的axis是一个Vector3类型的值。
2.矩阵
three.js里的矩阵和之前介绍的不太一样,因为three.js里的矩阵式一个4x4的复合的矩阵(Transform Matrix),将位置信息放在了矩阵的最后一行。可以很容易的从这个矩阵里分解出旋转矩阵(Rotation Matrix),和位置矩阵(Translation Matrix)。Matrix4的主要方法有:
mutiply():矩阵的乘法。
transpose() :矩阵转置。
getInverse(m) :求逆矩阵。
makeRotationFromEuler(euler) :通过一个欧拉类型的值来设置矩阵的值。
makeRotationFromQuaternion(q):通过一个四元数类型的值来设置矩阵。
makeRotationonAxis(axis,theta):按一个轴旋转θ°,然后设置矩阵的值。
makeRotationonAxis(axis,theta) 的源码为:
1 makeRotationAxis: function ( axis, angle ) { 2 var c = Math.cos( angle ); 3 var s = Math.sin( angle ); 4 var t = 1 - c; 5 var x = axis.x, y = axis.y, z = axis.z; 6 var tx = t * x, ty = t * y; 7 this.set( 8 tx * x + c, tx * y - s * z, tx * z + s * y, 0, 9 tx * y + s * z, ty * y + c, ty * z - s * x, 0, 10 tx * z - s * y, ty * z + s * x, t * z * z + c, 0, 11 0, 0, 0, 1 12 ); 13 return this; 14 }
通过源码,可以看出,调用这个方法就可以得到一个旋转矩阵了。然后,让物体的矩阵乘旋转矩阵就可以得到物体转动后的矩阵了。
下面是一段我使用旋转矩阵来旋转物体的代码。
function rotateAroundWorldAxis(object, axis, radians) { rotWorldMatrix = new THREE.Matrix4(); rotWorldMatrix.makeRotationAxis(axis.normalize(), radians); rotWorldMatrix.multiply(object.matrix); // pre-multiply object.matrix = rotWorldMatrix; object.rotation.setFromRotationMatrix(object.matrix); }
通过这样的方法,就可以让物体沿参考系中的确定的一个轴进行旋转了。
3.四元数
没有使用四元数,所以没有研究,在object3D中设置rotation可以通过Matrix ,也可以通过Quaternion ,不过setFromRotationQuaternion的内部也是用的Matrix。
坐标体系:http://www.cnblogs.com/silent-stranger/p/6307372.html
三维空间旋转:https://www.cnblogs.com/silent-stranger/p/6027266.html
三维旋转矩阵:https://wenku.baidu.com/view/6dac0c22915f804d2b16c17c.html
参考资料
https://www.fastgraph.com/makegames/3drotation/
http://www.essentialmath.com/GDC2012/GDC2012_JMV_Rotations.pdf
http://www.gamedev.net/page/resources/_/technical/math-and-physics/do-we-really-need-quaternions-r1199
https://threejs.org/docs/
推荐阅读
-
网络 IP 地址和子网划分|学习笔记 (1)
-
Pytorch 学习笔记 (8):正则化(L1、L2、Dropout)和规范化(BN、LN、IN、GN)
-
0411学习笔记 张宇基础30讲 - 第1讲 函数的概念和性质
-
Hadoop 学习笔记 (1):概念和总体架构
-
[下一代网络学习笔记] 1 下一代网络的基本概念和架构
-
[姿势估计] 实践记录:使用 Dlib 和 mediapipe 进行人脸姿势估计 - 本文重点介绍方法 2):方法 1:基于深度学习的方法:。 基于深度学习的方法:基于深度学习的方法利用深度学习模型,如卷积神经网络(CNN)或递归神经网络(RNN),直接从人脸图像中学习姿势估计。这些方法能够学习更复杂的特征表征,并在大规模数据集上取得优异的性能。方法二:基于二维校准信息估计三维姿态信息(计算机视觉 PnP 问题)。 特征点定位:人脸姿态估计的第一步是通过特征点定位来检测和定位人脸的关键点,如眼睛、鼻子和嘴巴。这些关键点提供了人脸的局部结构信息,可用于后续的姿势估计。 旋转表示:常见的旋转表示方法包括欧拉角和旋转矩阵。欧拉角通过三个旋转角度(通常是俯仰、偏航和滚动)描述头部的旋转姿态。旋转矩阵是一个 3x3 矩阵,表示头部从一个坐标系到另一个坐标系的变换。 三维模型重建:根据特征点的定位结果,三维人脸模型可用于姿势估计。通过将人脸的二维图像映射到三维模型上,可以估算出人脸的旋转和平移信息。这就需要建立人脸的三维模型,然后通过优化方法将模型与特征点对齐,从而获得姿势估计结果。 特征点定位 特征点定位是用于检测人脸关键部位的五官基础部分,还有其他更多的特征点表示方法,大家可以参考我上一篇文章中介绍的特征点检测方案实践:人脸校正二次定位操作来解决人脸校正的问题,客户在检测关键点的代码上略有修改,坐标转换部分客户见上图 def get_face_info(image). img_copy = image.copy image.flags.writeable = False image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = face_detection.process(image) # 在图像上绘制人脸检测注释。 image.flags.writeable = True image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR) box_info, facial = None, None if results.detections: for detection in results. for detection in results.detections: mp_drawing.Drawing.detection = 无 mp_drawing.draw_detection(image, detection) 面部 = detection.location_data.relative_keypoints 返回面部 在上述代码中,返回的数据是五官(6 个关键点的坐标),这是用 mediapipe 库实现的,下面我们可以尝试用另一个库:dlib 来实现。 使用 dlib 使用 Dlib 库在 Python 中实现人脸关键点检测的步骤如下: 确保已安装 Dlib 库,可使用以下命令: pip install dlib 导入必要的库: 加载 Dlib 的人脸检测器和关键点检测器模型: 读取图像并将其灰度化: 使用人脸检测器检测图像中的人脸: 对检测到的人脸进行遍历,并使用关键点检测器检测人脸关键点: 显示绘制了关键点的图像: 以下代码将参数 landmarks_part 添加到要返回的关键点坐标中。
-
Three.js 学习笔记 (1) - 坐标系和旋转
-
一起学习 matlab - matlab 学习笔记 9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映射_照明和着色
-
three.js Notes II 左旋和右旋坐标系 正旋转
-
Three.js 模型学习笔记(1.20更新):深入理解组、几何体和材质