0

In my aframe project i want to controll the movement speed with the cardboard magnetic button => start/stop with cardboard button.

On my desktop and phone the click event works like i want but if i put my iphone in the cardboard the button "click" doesn't trigger. If i touch with my finger on the scene it works...

Does the cursor need some settings to have access to the cardboard button? I tested the button in the google cardboard app and it worked.

Here is a little example of what i have. You can see the click event in the console.

    <!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>
Cantinband
  • 38
  • 1
  • 8

2 Answers2

0

Looking at Don's universal controls, he's registering the touch events on the canvas. Borrowing from his code, you could try something like:

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)
      }
    }
});

Here's the universal controls link for more info:

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

Noam Almosnino
  • 866
  • 1
  • 6
  • 8
  • thanks for your help, but unfortunately it does not work. the button still not trigger. Touch on screen works still. i also tried to wait for the scene is loaded and then add the listener. no change... – Cantinband Feb 18 '18 at 09:12
  • Hm which device are you on? Here's a quick example that works on Pixel with Cardboard: https://glitch.com/edit/#!/a-frame-cardboard-move updated the answer to reflect it.. – Noam Almosnino Feb 18 '18 at 20:55
  • i have tested: iPhone 6, iPhone 5s, iPhone SE (all iOs 11.2.5) and one Android A3. it does not work on any device. I checked also the magnetic pulse from my cardboard. you can see downs from the button in this screenshot: https://ibb.co/e6SjY7 the crazy thing is that it works perfect in the google cardboard app – Cantinband Feb 19 '18 at 18:10
  • Very strange, I did a test with iPhone 7 (iOS 11.2.5 as well) and it's working. I suppose the next thing you could try is the universal controls to see if it makes a difference: https://stackoverflow.com/questions/43882464/how-to-move-around-with-a-frame-using-google-cardboards-button if that's not working perhaps a-frame slack could be of help as well. – Noam Almosnino Feb 19 '18 at 20:19
  • maybe is my umi vr box 3 incompatible... the universal controls checkpoint example doesn't work either. Only the fuse but not the button click. i have now asked in slack for help. let's see – Cantinband Feb 19 '18 at 22:37
0

The magnet switch on version 1 cardboard cannot be detected by a web browser. The screen-touch switch on version 2 can.

Doug Reeder
  • 698
  • 6
  • 12