在THREE.JS中手动将旋转和翻译应用于Matrix4 [英] Manually applying rotations and translations to Matrix4 in THREE.JS

问题描述

我试图理解three.js的坐标空间，我知道有object.matrix和object.matrixWorld。

I am trying to understand the co-ordinate spaces of three.js, I understand that there is object.matrix and object.matrixWorld.

绊倒了这个博客文章矩阵基础知识。如何逐步避免将方向存储为3个角度，我决定尝试学习如何手动操作Matrix4的属性，从而避免使用Euler旋转。

After stumbling upon this blog post Matrix Basics. How to step away from storing an orientation as ’3 angles’, I decided to try to learn how to manipulate properties of the Matrix4 manually thus avoiding using Euler rotations.

我要做的就是将我的立方体从原点0,0,0转换，然后在世界空间中旋转它。我想到的结果是，立方体首先在y轴上平移，然后旋转会将它以大弧度返回到平面，但实际发生的是它只是回到原点而忽略了平移。

All I am trying to do is translate my cube away from the origin 0,0,0 then rotate it in world space. The result in my mind would be that the cube translates on y axis first, then the rotate would bring it in a large arc back to the plane, but what actually happens is it just goes back to the origin ignoring the translation.

我一直在做很多关于向量和矩阵的阅读，我有信心我现在已经理解了它们背后的理论。我真正得到的是three.js如何处理matrixWorld和matrix。我试过了两个！

I have been doing a lot of reading about vectors and matrices and I'm confident I understand the theory behind them enough now. What I don't really get is how three.js handles the matrixWorld and matrix. I've attempted both!

这是一个演示的小提琴： http://jsfiddle.net/SCXNQ/151/

Here is a fiddle to demonstrate: http://jsfiddle.net/SCXNQ/151/

只需查看render（）函数，看看我正在尝试做什么！

Just look in the render() function to see what I'm trying to do!

编辑 - [已解决]更新的工作版FIDDLE 14/09/12

在下面的答案的帮助下，我想我会发布我更新的小提示，展示我想要达到的目标 - http://jsfiddle.net/SCXNQ/363/

With the help of the answer below, I thought I would post my updated fiddle demonstrating what I wanted to achieve - http://jsfiddle.net/SCXNQ/363/

推荐答案

看看这个，这就是我想你想要的。

Have a look at this, which is what I think you want.

编辑：
哎呀，错误的矩阵命令（另一件你需要掌握的东西） - >尝试这个以及。

这篇关于在THREE.JS中手动将旋转和翻译应用于Matrix4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！