Question

我正在使用A帧构建VR场景。我在场景中有几个圆圈，并在它们上指向一个光标，将触发“鼠标进入器”，将相机传送到一个新位置。当我打开网站时，它工作正常，但是当我通过单击右下角的纸板图标进入VR模式（双屏模式）时，在手机上不起作用。

这里是网站的链接，因此您可以看到它不起作用： https://kotecki-museum-of-art.neocities.org/mainMuseumOfArt.html

我使用最近的0.8.2版本的A-Frame（0.8.0版本的相机抖动很多）。 a光标的保险丝属性设置为“ true”（如果将其设置为“ false”，mouseenter根本无法在移动设备上使用，但是仍然可以在我的PC上使用）。

如何解决此问题？

我在下面粘贴了我的代码。我摆脱了代码中与问题无关的某些部分（一些其他几何图形，因此代码更易于阅读）：

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

Answer 1

使用和移动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帧“ mouseenter”在VR模式下不起作用

1 个答案: