代码之家 › 专栏 › 技术社区 › Taserface

A帧“mouseenter”在VR模式下不工作

virtual-reality aframe javascript

0

Taserface · 技术社区 · 7 年前

我正在使用A帧构建虚拟现实场景。我在场景中画了几个圆圈,将光标指向这些圆圈会触发“鼠标指针”,从而将相机传送到一个新位置。当我打开网站时,它工作正常,但当我点击右下角的这个纸板图标进入虚拟现实模式(双屏模式)时,它在手机上不工作。

https://kotecki-museum-of-art.neocities.org/mainMuseumOfArt.html

如何解决这个问题?

我把代码贴在下面。我去掉了代码中与问题无关的部分(一些额外的几何图形,因此代码更容易阅读):

 <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 回复 | 直到 7 年前

1

0

Diego Marcos 7 年前

使用并移动 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>

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

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

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