Javascript 关于twoway-motion.js的手机帧移动控制

我正在一个框架上测试twoway-motion.js，它提供了一种简单的方法来专门导航，而无需移动电话的设备定位许可

有关详细信息，请查看此故障页面：

另请参见@flowerio提供的twoway-motion.js

AFRAME.registerComponent('twoway-motion', {
schema: {
    speed: { type: "number", default: 40 },
    threshold: { type: "number", default: -40 },
    nonMobileLoad: { type: "boolean", default: false },
    removeCheckpoints: {type: "boolean", default: true },
    chatty: {type: "boolean", default: true }
},
init: function () {
    var twowaymotion = document.querySelector("[camera]").components["twoway-motion"];
    twowaymotion.componentName = "twoway-motion";
    report = function(text) {
        if (twowaymotion.data.chatty) {
            console.log(twowaymotion.componentName, ":", text); 
        }
    }

    report("init."); 
    // report("asked to load with speed=", this.data.speed);

    if (!AFRAME.utils.device.isMobile() && this.data.nonMobileLoad === false) {
        // this is only for mobile devices.
        //document.querySelector("[camera]").removeAttribute("twoway-motion");
        report("Retired. Will only work on mobile.");
        return;
    } else {
        if (this.data.nonMobileLoad === true) {
            report("Loading on non-mobile platform.");
        }
    }

    if (this.el.components["wasd-controls"] === undefined) {
        this.el.setAttribute("wasd-controls", "true");
        report("Installing wasd-controls.");
    }
    this.el.components["wasd-controls"].data.acceleration = this.data.speed;

    // two-way hides checkpoint-controls by default.
    if (this.data.removeCheckpoints) {
        if (this.el.components["checkpoint-controls"] !== undefined) {
            var checkpoints = document.querySelectorAll("[checkpoint]");
            for (var cp = 0; cp < checkpoints.length; cp++) {
                checkpoints[cp].setAttribute("visible", false);
            }
        }
    }

    this.el.removeAttribute("universal-controls");
    if (this.el.components["look-controls"] === undefined) {
        this.el.setAttribute("look-controls", "true");
    }

    var cur = document.querySelector("[cursor]");
    if (cur !== null) {
        console.log(this.componentName, ": found a cursor.");
        this.cur = cur;
        //this.curcolor = cur.getAttribute("material").color;
        this.curcolor = cur.getAttribute("color");
    } else {
        console.log(this.componentName, ": didn't find a cursor.");
    }

    var canvas = document.querySelector(".a-canvas");

    canvas.addEventListener("mousedown", function (e) {
        report("mousedown", e);
        twowaymotion.touching = true;
        this.touchTime = new Date().getTime();
    });
    canvas.addEventListener("mouseup", function (e) {
        report("mouseup", e);
        twowaymotion.touching = false;
    });

    canvas.addEventListener("touchstart", function (e) {
        this.touch = e;
        report("touches.length: ", e.touches.length);
        if (e.touches.length > 1) {
            report("multitouch: doing nothing");
        } else {
            report("touchstart", e);
            twowaymotion.touching = true;
        }
    });
    canvas.addEventListener("touchend", function () {
        console.log(this.componentName, " touchend");
        twowaymotion.touching = false;
    });
},
update: function() { 
    if (this.el.components["twoway-controls"] !== undefined) {
        this.el.components["wasd-controls"].data.acceleration = this.el.components["wasd-controls"].data.speed;
    }
},
tick: function () {
    if (!AFRAME.utils.device.isMobile() && this.data.nonMobileLoad === false) {
        // this is only for mobile devices, unless you ask for it.
        return;
    }
    if (!this.isPlaying) {
        return;
    }
    var cam = this.el;
    var camrot = cam.getAttribute("rotation");

    if (camrot.x < this.data.threshold) {
        // we are looking down
        if (this.cur !== null && this.cur !== undefined) {
            this.cur.setAttribute("material", "color", "orange");
        }
        if (this.touching === true) {
            cam.components["wasd-controls"].keys["ArrowDown"] = true;
        } else {
            cam.components["wasd-controls"].keys["ArrowDown"] = false;
            cam.components["wasd-controls"].keys["ArrowUp"] = false;
        }
    } else {
        // we are looking forward or up
        if (this.cur !== null && this.cur !== undefined) {
            this.cur.setAttribute("material", "color", this.curcolor);
        }
        if (this.touching === true) {
            cam.components["wasd-controls"].keys["ArrowUp"] = true;
        } else {
            cam.components["wasd-controls"].keys["ArrowDown"] = false;
            cam.components["wasd-controls"].keys["ArrowUp"] = false;
        }
    }
},
pause: function () {
    // we get isPlaying automatically from A-Frame
},
play: function () {
    // we get isPlaying automatically from A-Frame
},
remove: function () {
    if (this.el.components["wasd-controls"] === undefined) {
        this.el.removeAttribute("wasd-controls");
    }
} });

AFRAME.registerComponent（'two-way-motion'{
模式：{
速度：{type:“number”，默认值：40}，
阈值：{type:“number”，默认值：-40}，
非移动加载：{type:“boolean”，默认值：false}，
removeCheckpoints:{type:“boolean”，默认值：true}，
chatty:{type:“boolean”，默认值：true}
},
init：函数（）{
var twowaymotion=document.querySelector（“[camera]”）。组件[“twowaymotion”]；
twowaymotion.componentName=“双向运动”；
报告=功能（文本）{
if（twowaymotion.data.chatty）{
console.log（twowaymotion.componentName，“：”，文本）；
}
}
报告（“初始”）；
//报告（“要求加载速度=”，this.data.speed）；
if（！AFRAME.utils.device.isMobile（）&&this.data.nonMobileLoad==false）{
//这仅适用于移动设备。
//document.querySelector（“[camera]”）。removeAttribute（“双向运动”）；
报告（“已退休。将只在手机上工作。”）；
返回；
}否则{
if（this.data.nonMobileLoad==true）{
报告（“在非移动平台上加载”）；
}
}
if（this.el.components[“wasd控制”]==未定义）{
this.el.setAttribute（“wasd控件”、“true”）；
报告（“安装wasd控制装置”）；
}
this.el.组件[“wasd控制”]。data.acceleration=this.data.speed；
//默认情况下，双向隐藏检查点控件。
if（this.data.removeCheckpoints）{
if（this.el.components[“checkpoint controls”]！==未定义）{
var checkpoints=document.querySelectorAll（“[checkpoint]”）；
for（var cp=0；cp1）{
报告（“多点触控：无所事事”）；
}否则{
报告（“touchstart”，e）；
twowaymotion.touching=真；
}
});
canvas.addEventListener（“touchend”，函数（）{
console.log（this.componentName，“touchend”）；
双向运动。触摸=错误；
});
},
更新：函数（）{
if（此.el.组件[“双向控制”]！==未定义）{
this.el.components[“wasd控制”].data.acceleration=this.el.components[“wasd控制”].data.speed；
}
},
勾选：函数（）{
if（！AFRAME.utils.device.isMobile（）&&this.data.nonMobileLoad==false）{
//这仅适用于移动设备，除非您要求。
返回；
}
如果（！this.isPlaying）{
返回；
}
var cam=this.el；
var camrot=cam.getAttribute（“旋转”）；
if（camrot.x<此数据阈值）{
//我们正在往下看
if（this.cur！==null&&this.cur！==未定义）{
此.cur.setAttribute（“材质”、“颜色”、“橙色”）；
}
if（this.touching==true）{
cam.components[“wasd控件”]。键[“箭头向下”]=true；
}否则{
cam.components[“wasd控件”]。键[“箭头向下”]=false；
cam.components[“wasd控制”]。键[“ArrowUp”]=false；
}
}否则{
//我们是向前看还是向上看
if（this.cur！==null&&this.cur！==未定义）{
this.cur.setAttribute（“材质”、“颜色”，this.curcolor）；
}
if（this.touching==true）{
cam.components[“wasd控制”]。键[“ArrowUp”]=true；
}否则{
cam.components[“wasd控件”]。键[“箭头向下”]=false；
cam.components[“wasd控制”]。键[“ArrowUp”]=false；
}
}
},
暂停：函数（）{
//我们从A帧中自动显示
},
播放：函数（）{
//我们从A帧中自动显示
},
删除：函数（）{
if（this.el.components[“wasd控制”]==未定义）{
此.el.removeAttribute（“wasd控制”）；
}
} });

由于移动电话上未授予设备定向许可，因此“向后移动”不起作用，而且，当观众试图通过触摸屏幕或在屏幕上滑动以不同的方向旋转时，它仍然起到“向前移动”的作用

根据我的想象，如果有一个简单的编辑，如果观众触摸屏幕超过2秒，它开始向前移动，如果观众只是旋转，它不会向前移动，因为当你滑动或触摸屏幕旋转时，触摸时间可能不会长到2秒

这是在没有设备定向许可的情况下，我可以想象的最简单的解决方案

或者有没有其他更好的方法来划分轮换和转移战争