Question

在我的aframe项目中，我想用纸板磁性按钮控制移动速度=＆gt;用纸板按钮开始/停止。

在我的桌面和手机上，点击事件就像我想要的那样，但是如果我把我的iPhone放在纸板上，按钮“点击”就不会触发。如果我用手指在场景上触摸它就可以了......

光标是否需要一些设置才能访问纸板按钮？我测试了谷歌纸板应用程序中的按钮，它工作。

以下是我所拥有的一个小例子。您可以在控制台中看到click事件。

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Click Test</title>
    <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-extras.ocean@3.13.1/dist/aframe-extras.ocean.min.js"></script>
    <script>
    AFRAME.registerComponent("start-click", {
        init: function() {

            this.el.addEventListener("click", function() {
                console.log("clicked in the scene")
            });
        }
        });
    </script>
</head>

<body>
    <a-scene start-click>
        <!-- sky + ocean -->
        <a-sky radius="100" color="tomato" position="0 -6 0 "></a-sky>
        <a-ocean id="ocean" width="200" depth="200" density="200" position="0 0 0"></a-ocean>

        <!-- camera + cursor. -->
        <a-camera id="camera" position="0 20 80 " fly wasd-controls-enabled="false">
            <a-cursor fuse="false" id="cursor" color="black"></a-cursor>
        </a-camera>
    </a-scene>
    <script>
        document.querySelector("a-scene").enterVR();
    </script>
</body>

</html>

Answer 1

看着Don的通用控件，他在画布上注册触摸事件。借用他的代码，你可以尝试类似的东西：

AFRAME.registerComponent("start-click", {
    init: function() {
        const sceneEl = this.el.sceneEl
        const canvasEl = sceneEl.canvas
        const camera = document.querySelector('a-camera')
        this.isMoving = false
        this.position = {x: 0, y: 20, z: 80}

        canvasEl.addEventListener('touchstart', () => {
            this.isMoving = true
        })

        canvasEl.addEventListener('touchend', () => {
            this.isMoving = false
        })
    },
    tick: function () {
      if (this.isMoving) {
        this.position.z -= 1
        camera.setAttribute('position', this.position)
      }
    }
});

以下是通用控件链接以获取更多信息：

https://github.com/donmccurdy/aframe-extras/blob/master/src/controls/touch-controls.js

Answer 2

Web浏览器无法检测到版本1纸板上的磁性开关。版本2上的屏幕触摸开关可以。

Answer 3

我提供这个作为答案，因为我没有足够的声誉来发表评论，但我想在此发布：

另外，我尝试了Noam Almosnino的Pixel＆amp; amp;纸板，它只注册触摸输入，但不是磁性输入，如预期的那样。我认为Don McCurdy的通用控制器不足以跟踪磁性开关。您可以考虑You might need to use an API to track the magnetic input，也是由Don McCurdy提供的。对不起，我不能给你一个完整的答案，但我希望这能以某种方式帮助你。

aframe纸板按钮（磁铁）点击不触发

3 个答案: