资讯专栏INFORMATION COLUMN

threejs中矩阵旋转原理

gyl_coder / 2831人阅读

摘要:如创建一个的矩阵将上面创建的矩阵按照传入的轴旋转传入的弧度旋转轴,旋转弧度原型上的方法值为值为初始值为执行之后的值为将按照旋转轴和弧度旋转完成的矩阵和几何体的矩阵相乘框架源码这里的是因为只传入一个值和是全等的

矩阵的概念 threejs中的矩阵 矩阵的应用 用于旋转一个几何体 创建一个立方体cube放到场景中;

绕向量(1,1,0)旋转30度
var axis = new THREE.Vector3(1,1,0);    //创建一个三维向量
var rotWorldMatrix = new THREE.Matrix4();      //创建一个4*4矩阵
rotWorldMatrix.makeRotationAxis(axis.normalize(),  30 * Math.PI / 180 );
rotWorldMatrix.multiply(cube.matrix);                // pre-multiply
cube.matrix = rotWorldMatrix;
cube.rotation.setFromRotationMatrix(cube.matrix);
旋转之前与之后对比

向量一定是从几何体中心指向外面?

能围绕一个不以圆点位起点的向量旋转?

代码详解
创建一个三维空间中的点
var axis = new THREE.Vector3(1,1,0); 

打印出axios

THREE.Vector3(1,1,0).normalize()
axis.normalize()  //返回一个向量,其方向与指定向量相同,但长度为一。
如:
var axis = new THREE.Vector3(10,20,0);
console.log( axis.normalize() );   //{x: 0.4472135954999579, y: 0.8944271909999159, z: 0}
(0.4472135954999579^2)+(0.8944271909999159^2)+(0^2) = 1

var axis1 = new THREE.Vector3(1,1,0);
console.log( axis1.normalize() )   //{x: 0.7071067811865475, y: 0.7071067811865475, z: 0}
(0.7071067811865475^2)+(0.7071067811865475^2)+(0^2) = 1
创建一个4*4的矩阵
var rotWorldMatrix = new THREE.Matrix4();
console.log( rotWorldMatrix )

将上面创建的4×4矩阵按照传入的轴旋转传入的弧度

rotWorldMatrix.makeRotationAxis( 旋转轴,旋转弧度 )

//Matrix4原型上的方法
//axis = axis.normalize()   值为 {x: 0.7071067811865475, y: 0.7071067811865475, z: 0}
//angle = 30 * Math.PI / 180     值为 pi/6
makeRotationAxis: function ( axis, angle ) {

    var c = Math.cos( angle );    //Math.cos(π/6)
    var s = Math.sin( angle );    //Math.sin(π/6)
    var t = 1 - c;
    var x = axis.x, y = axis.y, z = axis.z;
    var tx = t * x, ty = t * y;

    this.set(

        tx * x + c, tx * y - s * z, tx * z + s * y, 0,
        tx * y + s * z, ty * y + c, ty * z - s * x, 0,
        tx * z - s * y, ty * z + s * x, t * z * z + c, 0,
        0, 0, 0, 1

    );

     return this;

},

rotWorldMatrix.makeRotationAxis(axis.normalize(), 30 * Math.PI / 180 );
rotWorldMatrix初始值为{ elements:[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] }
执行makeRotationAxis()之后的值为:

将按照旋转轴和弧度旋转完成的矩阵和几何体的矩阵相乘

rotWorldMatrix.multiply(cube.matrix);

//框架源码
multiply: function ( m, n ) {
    if ( n !== undefined ) {      //这里的n是undefined因为只传入一个值cube.matrix
        return this.multiplyMatrices( m, n );
    }
    return this.multiplyMatrices( this, m );
},
multiplyMatrices: function ( a, b ) {

    var ae = a.elements;   //rotWorldMatrix.elements
    var be = b.elements;   //cube.matrix.elements
    var te = this.elements;  //ae和te是全等的

    var a11 = ae[ 0 ], a12 = ae[ 4 ], a13 = ae[ 8 ], a14 = ae[ 12 ];
    var a21 = ae[ 1 ], a22 = ae[ 5 ], a23 = ae[ 9 ], a24 = ae[ 13 ];
    var a31 = ae[ 2 ], a32 = ae[ 6 ], a33 = ae[ 10 ], a34 = ae[ 14 ];
    var a41 = ae[ 3 ], a42 = ae[ 7 ], a43 = ae[ 11 ], a44 = ae[ 15 ];

    var b11 = be[ 0 ], b12 = be[ 4 ], b13 = be[ 8 ], b14 = be[ 12 ];
    var b21 = be[ 1 ], b22 = be[ 5 ], b23 = be[ 9 ], b24 = be[ 13 ];
    var b31 = be[ 2 ], b32 = be[ 6 ], b33 = be[ 10 ], b34 = be[ 14 ];
    var b41 = be[ 3 ], b42 = be[ 7 ], b43 = be[ 11 ], b44 = be[ 15 ];

    te[ 0 ] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
    te[ 4 ] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
    te[ 8 ] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
    te[ 12 ] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;

    te[ 1 ] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
    te[ 5 ] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
    te[ 9 ] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
    te[ 13 ] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;

    te[ 2 ] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
    te[ 6 ] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
    te[ 10 ] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
    te[ 14 ] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;

    te[ 3 ] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
    te[ 7 ] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
    te[ 11 ] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
    te[ 15 ] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;

    return this;

},

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88490.html

相关文章

  • SegmentFault 技术周刊 Vol.35 - WebGL:打开网页看大片

    摘要:在文末,我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一,它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 Web...

    objc94 评论0 收藏0
  • Threejs教程之着色器

    摘要:学习基础具备基本和着色器语言知识,不一定要深入学习。着色器所谓的材质对象本质上就是着色器代码和需要传递的数据光源颜色矩阵。比更方便些,着色器中的很多变量不用声明,系统会自动帮你设置,比如顶点坐标变量投影矩阵视图矩阵 Three.js着色器 很多时候如果想写一些特效,往往需要编写着色器代码GLSL,如果你不熟悉着色器语言,自然需要学习着色器语言语法,如果你有着色器语言基础,直接使用Thr...

    darkbaby123 评论0 收藏0
  • 高仿腾讯QQ Xplan(X计划)的H5页面(1):threejs创建地球

    摘要:首先是这个地球,得看看它是真还是假因为很多效果是拿雪碧图做的,比如这里的旋转的飞机,结果找到了并且在网站文件中搜到了,那就是没跑了。 上个月底,在朋友圈看到一个号称这可能是地球上最美的h5的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 线上地址 github地址 除了手机端的media控制没有去兼容,其他的基本都给仿了。 那为了让你...

    MartinHan 评论0 收藏0
  • 在SAP UI使用纯JavaScript显示产品主数据的3D模型视图

    摘要:以为例,在产品主数据的页面工具栏上新增了一个按钮,点击之后,会显示一个弹出窗口,在浏览器里利用调用本地安装的应用,显示该产品主数据的视图。本文介绍的是另一种用纯编程来以方式显示产品主数据的解决方案。 在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的。 showImg(https://segmentfault.com/img/remote/...

    FingerLiu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<