使用three.js在多轴上旋转

时间:2014-03-14 23:03:01

标签: javascript mobile 3d three.js

我正在尝试使用three.js和deviceorientation事件。我正在使用手机的加速计旋转立方体,使用THREE.DeviceOrientationState plugin中使用的技术。基本上,将deviceorientation事件角度的坐标转换为弧度,并应用于网格的旋转坐标(mesh.rotation.x等)。非常基本。

只要手机旋转不超过90度,此技术就可以正常工作,但一旦达到90度,旋转就会变得混乱,立方体基本上会“翻转”。不知道如何描述它。此外,只在一个轴上旋转时旋转工作正常,但只要涉及两个或更多轴并且手机旋转超过90度,我们就会遇到问题。

基本上我需要知道如何组合多个旋转角度,这样无论手机旋转多少,立方体都会随手机一起旋转。立方体应始终模仿手机的旋转。 (我知道,这样做有点奇怪,因为当它旋转太多时你看不到手机屏幕,但是请耐心等待我,我有一个计划。)

我想也许我正在敲击万向节锁,所以尝试使用四元数,但我得到了相同的结果。说实话,我有点不好意思问这个问题。我做了任何3D编程已经有一段时间了,但我觉得我应该知道如何做到这一点。

这是一些示例代码。我还需要做些什么来组合旋转角度?

$(window).on('deviceorientation', function(e) {
    var x = (!e.originalEvent.beta  ? 0 : e.originalEvent.beta) * Math.PI / 180;
    var y = (!e.originalEvent.gamma ? 0 : e.originalEvent.gamma) * Math.PI / 180;
    var z = (!e.originalEvent.alpha ? 0 : (e.originalEvent.alpha - 180)) * Math.PI / 180;

    cube.rotation.x = x;
    cube.rotation.y = y;
    cube.rotation.z = z;
});

更新:Here is a jsfiddle说明了这个问题。它已被修改为使用DeviceOrientationControls功能,该功能现在包含在three.js中。你会发现问题仍然存在。基本上我需要立方体才能完全模仿手机的方向,无论我多少转动手机。

更新2:我将上面的jsfiddle中的形状从一个立方体改为一个形状为手机的3d矩形。我认为用矩形比用立方体更容易看出发生了什么。

0 个答案:

没有答案