时间戳

首页 > 解决方案 > 在 AFrame 中设置开始游戏按钮

javascript - 在 AFrame 中设置开始游戏按钮

问题描述

所以我正在为一个学校项目开发一款虚拟现实游戏。使用 aframe，您需要进行用户交互才能在移动设备浏览器上启用声音。我正在尝试在网页上创建一个按钮，该按钮将充当触发器并将 a-scene 可见性设置为 false。问题是场景仍然存在，只是不可见并且加载在按钮顶部，所以我无法按下它。

我将按钮放在它自己的 div 中，并将顶部和底部的填充设置为 15px，但这不起作用。我还尝试将 a-scene 放在它自己的 div 中，但这并没有帮助

<body>

  <div  id="startButton"  
        style=" display: block;
                margin-left: 50%;
                margin-right: 50%;
                width: 100%;
                height: 100%;
                padding-top: 15px;
                padding-bottom: 15px">
    <button   onclick="startGame()">Start</button>
  </div>


    <a-scene  visible="true">


...

当我加载页面时，按钮以我喜欢的方式出现，但我无法按下它。看起来鼠标仍然设置在 a-scene 上，所以下面的任何东西都是不可触摸的。

编辑：添加了更多代码。

标签： javascripthtmlcsswebaframe

解决方案

visible=false对元素进行设置<a-scene>不会使其消失。你最好使用display属性。任何一个：

1) 隐藏/显示<a-scene>
2) 在场景前创建一个 div，并在您想要显示体验时将其隐藏。

查看 nr。2 在这个小提琴中。

推荐阅读