A-Frame «mouseenter» не работает в режиме VR - PullRequest
Новая
       6

A-Frame «mouseenter» не работает в режиме VR

0 голосов
/ 27 января 2019

Я создаю сцену VR, используя A-frame.У меня есть несколько кругов в сцене, и наведение курсора на них вызывает «мышиный центр», который перемещает камеру в новое положение.Он работает нормально, когда я открываю веб-сайт, но когда я вхожу в режим VR (режим двойного экрана), щелкая этот картонный значок в правом нижнем углу, он не работает на мобильном телефоне.

Вот ссылка на сайт, поэтому вы можете видеть, что она не работает: https://kotecki -museum-of-art.neocities.org / mainMuseumOfArt.html

Я использую последнюю версию A-Frame 0.8.2 (в версии 0.8.0 сильно дрожит камера).Атрибут fuse a-cursor установлен в «true» (если он установлен в «false», mouseenter вообще не работает на мобильных устройствах, однако все еще работает на моем ПК).

Как можно решить эту проблему?

Я вставил свой код ниже.Я избавился от некоторых частей кода, которые не имеют отношения к вопросу (некоторые дополнительные геометрические фигуры, поэтому код легче читать): 

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

1 Ответ

0 голосов
/ 28 января 2019

Используйте и перемещайте камеру : 

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