Question

我正在尝试使用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矩形。我认为用矩形比用立方体更容易看出发生了什么。

使用three.js在多轴上旋转

0 个答案: