2

我正在寻找一种在移动设备中(在 Cordova 应用程序中)使用传感器来改变物理引擎行为的方法。目前正在使用 PhysicsJS,但也发现 matte.js 作为物理引擎的候选者。

第一步,引擎的重力应该改变,所以它不是使用设备的 y 方向,而是取决于设备如何旋转的“真实”方向。后来(可选)z 方向也可以用来改变物理引擎的世界。

任何人都可以给我提示和/或示例吗?

  • 要读取什么传感器(方向、加速度计、陀螺仪、重力,?)。体面的智能手机/浏览器中是否集成了 HTML5 支持,还是添加 Cordova 插件更好?
  • 应用物理引擎的哪些更改以反映移动设备的新位置

环境:Cordova、Ionic、HTML5、Android >= Kitkat、iOS >= 7

到目前为止我自己的发现:

我想这是deviceorientation最适合我的要求的事件。一个非常原始的实现(并不令人满意)是这样的:

var acceleration = Physics.behavior('constant-acceleration')
    .setAcceleration({x: 0, y: GRAVITY * options.gravityFactor});

world.add([acceleration]);

if (window.DeviceOrientationEvent) {
    var deviceOrientationHandler = function (event) {
        world.one('step', function () {
            acceleration.setAcceleration({
                x: (90 / event.gamma) * GRAVITY,
                y: (90 / event.beta) * GRAVITY
            });
        });
    };
    window.addEventListener('deviceorientation',
        deviceOrientationHandler, false);
}

似乎更好的选择是计算设备关于 x、y 的角度,然后将重力矢量分成 x 和 y 部分。也许它甚至更复杂。这对我来说听起来像是很多数学运算。肯定已经有成百上千的人这样做了,请你帮帮我好吗?

所以现在剩下的更具体的问题是:

如何在 2D 物理引擎中将 DeviceOrientationEvent beta 和 gamma 转换为重力?

4

2 回答 2

2

您是否尝试过 matter.js 移动演示?
http://brm.io/matter-js-mobile/

它展示了如何根据移动设备的传感器改变重力。

源代码在这里:
https ://github.com/liabru/matter-js/blob/master/demo/js/DemoMobile.js

于 2015-11-03T20:50:22.143 回答
1

找到了第一个解决方案:

if (window.DeviceOrientationEvent) {
    var deviceOrientationHandler = function (event) {

        var pitch = Math.PI * event.beta / 180;
        var roll = Math.PI * event.gamma / 180;

        var acc = {
            x: Math.cos(pitch) * Math.sin(roll) * GRAVITY,
            y: Math.sin(pitch) * GRAVITY
        };

        world.one('step', function () {
            acceleration.setAcceleration(acc);
        });
    };
    window.addEventListener('deviceorientation',
        deviceOrientationHandler, false);
}

它在 Android 上运行良好,但在 iOS 上,当手机倾斜太多时,iOS 将方向改变为倒置,然后重力似乎反转了。当然有一个解决方案...

于 2015-10-29T16:01:51.107 回答