Question

同一场景中的触摸控制只能在左右方向上使用，不能在移动设备上上下移动但是使用桌面它可以完美地工作当我添加触摸控件时，外观控件已被删除

如何同时添加两者

Answer 1

我从“Igor R”那里得到了答案并稍微整理了一下。

AFRAME.components["look-controls"].Component.prototype.onTouchMove = function (t) {
    if (this.touchStarted && this.data.touchEnabled) {
        this.pitchObject.rotation.x += .6 * Math.PI * (t.touches[0].pageY - this.touchStart.y) / this.el.sceneEl.canvas.clientHeight;
        this.yawObject.rotation.y += /*  */ Math.PI * (t.touches[0].pageX - this.touchStart.x) / this.el.sceneEl.canvas.clientWidth;
        this.pitchObject.rotation.x = Math.max(Math.PI / -2, Math.min(Math.PI / 2, this.pitchObject.rotation.x));
        this.touchStart = {
            x: t.touches[0].pageX,
            y: t.touches[0].pageY
        }
    }
}

Answer 2

请指定您使用的是iOS设备还是Android。遵循的步骤：

在iOS 12.2上，这是一个已知问题，因为Apple已禁用Safari中的设备方向和设备运动。尝试手动启用它，但仍然无法正常工作。安装了Chrome和carboard-vr文件，但没有取得丰硕的成果。
在Android上，如果没有安装Google硬纸板。更新Aframe的版本，确保您使用的是A-Frame 0.9.2。

Answer 3

我想要在手机上做同样的事情。加载aFrame库后，添加以下代码：

AFRAME.components["look-controls"].Component.prototype.onTouchMove = function (t) {
                        var PI_2 = Math.PI/2,
                        e,
                        o = this.el.sceneEl.canvas,
                        i = this.yawObject,
                        j = this.pitchObject;
                        this.touchStarted && this.data.touchEnabled && (e = 2 * Math.PI * (t.touches[0].pageX - this.touchStart.x) / o.clientWidth, f = 2 * Math.PI * (t.touches[0].pageY - this.touchStart.y) / o.clientHeight, j.rotation.x += .3 * f, i.rotation.y += .5 * e, j.rotation.x = Math.max(-PI_2, Math.min(PI_2, j.rotation.x)), this.touchStart = {
                                x: t.touches[0].pageX,
                                y: t.touches[0].pageY
                            })
                        }

或者，您也可以在aframe.min.js（或使用的任何文件）中找到“外观控件”的代码，然后在其中修改onTouchMove函数。

允许上下同时进行触摸控制

3 个答案: