A-Frame "mouseenter" does not work in the VR mode

Question

I'm building VR scene using A-frame. I have a few circles in the scene and pointing a-cursor on them triggers "mouseenter" which teleports the camera to a new position. It works fine, when I open the website, but when I enter the VR MODE (double screen mode) by clicking this cardboard icon in the down right corner it doesn't work on mobile phone.

Here is the link to the website, so you can see it doesn't work: https://kotecki-museum-of-art.neocities.org/mainMuseumOfArt.html

I use the recent 0.8.2 version of A-Frame (0.8.0 version has camera shakes a lot). The fuse attribute of a-cursor is set to "true" (if it is set to "false" mouseenter doesn't work on mobile devices at all, however it still works on my PC).

How can this issue be fixed?

I pasted my code below. I got rid off some parts of the code, which are irrelevant to the question (some additional geometrical figures, so the code is easier to read):

 <html>
 <head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

 <script src="apple-mobile-web-app-capable"></script>
 </head>
 <body>
 <a-scene debug>



  <a-camera id="MainCamera" position="0 4 0" shadowMapHeight="512" 
  shadowMapWidth="512">
     <a-cursor color="orange" fuse="true" fuseduration = "1500"  />
  </a-camera>



   <a-light type="point" position="50 50 50" intensity="1" decay="3" 
  castShadow ="true"></a-light>


  <!--FLOORS-->

  <a-plane id="logo" scale="0.5 0.5" position="-4 3 -8" rotation="0 0 0"  
width="5" height="5" src="images/logo.png"></a-plane>

   <a-plane id="floor1" scale="40 30" position="0 0 0" rotation="-90 0 0"  metalness="0.5" color="#7ad5e8"></a-plane>

   <a-plane id="floor2" scale="20 40" position="0 0 -35" rotation="-90 0 0"  
metalness="0.5" color="#7ad5e8"></a-plane>

    <a-plane id="wallBack" scale="20 10" position="0 0 -55" rotation="0 0 0"  metalness="0.5" color="white"></a-plane>

    <a-plane id="wallLeft1" scale="40 10" position="-10 0 -35" rotation="0 90 0"  metalness="0.5" color="white" side="double"></a-plane>

  <a-plane id="wallRight1" scale="40 10" position="10 0 -35" rotation="0 90 0"  metalness="0.5"  color="white" side="double"></a-plane>

  <a-plane id="wallBack" scale="20 10" position="0 0 -55" rotation="0 0 0"  metalness="0.5" color="white"></a-plane>

  <a-plane id="wallMiddleLeft" scale="10 10" position="-15 0 -15" rotation="0 0 0"  metalness="0.5" color="white" side="double"></a-plane>

  <a-plane id="wallMiddleRight" scale="10 10" position="15 0 -15" rotation="0 0 0"  metalness="0.5" color="white" side="double"></a-plane>

  <a-plane id="wallLeft2" scale="30 10" position="-20 0 0" rotation="0 90 0"  metalness="0.5" color="white" side="double"></a-plane>

  <a-plane id="wallLeft2" scale="30 10" position="20 0 0" rotation="0 90 0"  metalness="0.5" color="white" side="double"></a-plane>

  <a-plane id="wallFront" scale="40 10" position="0 0 15" rotation="0 0 0"  metalness="0.5" color="white" side="double"></a-plane>


   <!--<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">-->
    <!--<a-animation attribute="rotation" dur="5000" begin="mouseenter" repeat="indefinite" to="0 360 0"></a-animation>-->
    <!--<a-animation attribute="material.color" dur="5000" begin="click" repeat="indefinite"  from="#4CC3D9" to="#00FF00"></a-animation>-->
    <!--<a-animation attribute="scale" begin="3000" to="3 3 3"></a-animation>-->
   <!--</a-box>-->


  <!--MOVEMENT CIRCLES-->

  <a-circle id="c1" position="-10 0.3 3" radius="1.25" rotation="-90 0 0" color="#EF2D5E"></a-circle>

  </a-scene>

 <script src="scriptMuseum.js"></script>

  </body>
 </html>

Javascript:

 var c1 = document.querySelector("#c1");

 var cam1 = document.querySelector("#MainCamera");

 c1.addEventListener("mouseenter", function () {
 cam1.setAttribute("position","-10 4 3")  
  });

Diego Marcos Diego Marcos · Accepted Answer · 2019-01-27T22:55:04

Use and move a camera rig:

<a-entity id=“rig” position=“0 4 0”>
  <a-camera 
    shadowMapHeight="512" 
    shadowMapWidth="512">
       <a-cursor color="orange" fuse="true" fuseduration = "1500"  />
  </a-camera>
</a-entity>

Javascript:

var c1 = document.querySelector("#c1");

var rig = document.querySelector("#rig");

c1.addEventListener("mouseenter", function () {
rig.setAttribute("position","10 4 3")});

A-Frame "mouseenter" does not work in the VR mode

1 Answers