在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屋!