javascript - JavaScript 中带有欧拉 Angular 的 CSS 立方体全景控件

Question

我目前正在构建一个查看器来显示全景照片。我将图像放在 CSS 立方体的内部，并且正在研究如何利用 javascript 中的 deviceorientation 事件来控制它。

我已经找到并实现了一种算法，可以将来自设备方向事件的原始数据转换为欧拉 Angular ，但我不确定如何使用 CSS 3d 旋转变换来连接这些数据以旋转立方体。

我的目标是能够让用户举起手机环顾四周，类似于一些商业软件。

我正在考虑利用 three.js 来执行此操作，但库的大小对于这个特定元素来说太大了。我们希望保持较低的开销。

这是我目前拥有的代码的一部分:

[已编辑]

任何帮助将不胜感激!谢谢!

更新

我现在可以使用一些基本功能。这是更新后的代码:

[已编辑]

您需要关闭屏幕旋转，并且必须将手机倾斜成横向 View 。我现在的新问题是如何在手机处于纵向位置时以及在屏幕旋转打开时使这一切正常工作。

Answer 1

所以在大量研究和谷歌上一些非常有用的文章的帮助下，我终于设法解决了这个问题——特别是这篇文章:

http://dev.opera.com/articles/w3c-device-orientation-usage/#demo

基本上，我最终将陀螺仪的 Tait-Bryan Angular 转换为旋转矩阵。这有点棘手，因为在创建从欧拉矩阵到旋转矩阵的转换时，轴组合有许多不同的可能序列。我使用了上面文章中使用的 ZYX 组合。

然后我用另外两个矩阵转换了这个初始矩阵。第一个是围绕 z 轴旋转以说明屏幕的方向。第二个是 XZ 轴的反转，解决了当相机向上看时 css 立方体移动方向的问题；向上看将立方体向下移动。

最后，我不得不有点 hackey。立方体内部的图像偏离了当前方向，所以我重新组织了图像并旋转了立方体的面。我尝试了各种旋转矩阵变换，但似乎没有任何方法可以在不搞砸我的控制的情况下纠正它。

希望这对遇到类似问题的其他人有用。

你可以在这里找到我的最终解决方案代码笔:

[已编辑]