difference between Touch screen and Cardboard button

[bewegende-Architektur]

Hey there :)

I would like to create vr in aframe and desktec v5. The idea is to use the button of the glasses to move forward.

I was starting out with the minimal example:

<a-entity id="rig" movement-controls position="25 0 25"> <a-entity camera position="0 1.6 0" look-controls="pointerLockEnabled: true"></a-entity> </a-entity>

This is working on PC with WASD and with ouch on iphone aswell. When using vr-mode, i am able to move by touching the screen of the iphone. But when butting the camera into the holder, the button of the desktec is not recognized. (it is working in the minimal example of google cardboard)

My question is: What is the difference between Touch screen and Cardboard button? I tought this is the same. How could i use the cradboard-button to move forward?

Greetings, Chris

[vincentfretin]

Hi, From the documentation, it should indeed touch-controls: Touch screen (or Cardboard button) to move forward. This may have worked several years ago with WebVR. With WebXR now we may need to fix the code to also listen on selectstart/selectend from the comment of @kylebakerio here https://github.com/aframevr/aframe/issues/3969#issuecomment-884385659 I don't have a cardboard to test it. You can try making the changes in touch-controls, happy to review any PR and merge if you got it working.

[bewegende-Architektur]

Thank you very much for your answer! I will try to solve it and answer again when its working. Greetings, Chris

[vincentfretin]

Did you manage to add the listener to test it? It may not be straightforward because it's on the xrSession. I did the change in a branch https://github.com/vincentfretin/aframe-extras/commits/cardboard but I didn't test that. You can try https://cdn.jsdelivr.net/gh/vincentfretin/aframe-extras@380375b/dist/aframe-extras.min.js and let me know.

[vincentfretin]

@bewegende-Architektur did you manage to test an example with my build? Let me know.

[vincentfretin]

I'm not sure how it works with cardboard, do you click on the VR button yourself before inserting the phone in the cardboard? If yes, be aware if you use your own aframe master build and later with aframe 1.4.0 you will need <a-scene vr-mode-ui="cardboardModeEnabled:true">, see https://github.com/aframevr/aframe/commit/042a3d6b7087a632c5165227b14bc37573375cde

[bewegende-Architektur]

Dear Vincent,

thanks again for your answer. Sorry for my late response. I have created a simple scene here: https://sandbox.bewegende-architektur.com/

`

`

The Version im using is aframe 1.2 because vr ist not loaded on Iphone with version 1.3. Unfortunately i have found out, that i was using twoway-motion in order to move. When using movement-controls only, i am not able to move at all. Sorry for the confusion.

Am i missing something here?

Greetings, Chris

PS: This is the log from console: A-Frame Version: 1.2.0 (Date 2021-02-05, Commit #b220fa00) aframe.min.js:2718 THREE Version (https://github.com/supermedium/three.js): ^0.125.1 aframe.min.js:2718 WebVR Polyfill Version: ^0.10.12 aframe-extras.min.js:1 WARNING: Multiple instances of Three.js being imported. (anonymous) @ aframe-extras.min.js:1 aframe.min.js:19 core:schema:warn Unknown property cardboardModeEnabled for component/system vr-mode-ui. aframe-extras.min.js:1 Uncaught ReferenceError: bind is not defined at i.bindMethods (aframe-extras.min.js:1:762974) at i.init (aframe-extras.min.js:1:762009) at i.initComponent (aframe.min.js:2626:4886) at i.updateProperties (aframe.min.js:2626:4630) at module.exports.Component (aframe.min.js:2626:2811) at new i (aframe.min.js:2626:9473) at HTMLElement.value (aframe.min.js:2618:4266) at HTMLElement.value (aframe.min.js:2618:5970) at HTMLElement. (aframe.min.js:2618:8095) at i.injectControls (aframe-extras.min.js:1:759883) /favicon.ico:1 Failed to load resource: the server responded with a status of 404 () DevTools failed to load source map: Could not load content for https://sandbox.bewegende-architektur.com/aframe-master.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[vincentfretin]

Oups, I indeed made a mistake in the code. I told you I didn't test it. Ok I rebased my branch, fixed the code and push forced. I don't do support for old version of aframe sorry. I know for sure that iPhone cardboard is working on aframe master with three 144 because I helped fixing the old WebVRManager last time. So I created an example with latest aframe master and my cardboard patch here https://glitch.com/edit/#!/vfretin-aframe-cardboard I tested on Safari iPad (be sure to select mobile version from address bar), with or without the patch, when clicking on VR button and touching the screen, it moves forward, it also move backwards with two fingers, because it's using webvr-polyfill. So really there is no change needed for iOS here except using aframe master, vr-mode-ui="cardboardModeEnabled:true" and using mobile version from the address bar (Is this the default on iPhone?). I tested on Chrome Android, without the patch, clicking VR and touching the screen, it doesn't move as expected because Chrome Android implements WebXR. With the patch, it moves forward when I touch the screen. Two fingers to move backward doesn't work, but it's expected in my patch, and I don't think we can detect several fingers with the selectstart event.

Is there an interest to merge the changes for Chrome Android? Does anyone have a cardboard and Android phone to really test it?

[kylebakerio]

tested on android, works.

[bewegende-Architektur]

You are amazing Vincet! It is working on Iphone 7 with iOS 15.7.1 in Safari :)

[vincentfretin]

I created the #386 PR and merged it. Please now use the new build https://cdn.jsdelivr.net/gh/n5ro/aframe-extras@258d575/dist/aframe-extras.min.js