Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>A-Frame</title>
<script src="//aframe.io/releases/0.7.1/aframe.min.js"></script>
<style>
   a-scene{
     z-index: -1;
   }
   .container{
     position:absolute;
     width:100%;
     display: flex;
     justify-content: center;
     margin-top: 15%;
   }
   .button{
     font-weight: bold;
     background-color: limegreen;
      padding: 10px;
     margin: 24px 0 0 0;
   }

</style>

</head>
<body>
<div id="container" class="container">
    <a class="button" id="start_experience" href="#">start experience</a>
</div>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-scene>
 <script>
  var startExperienteBtn = document.getElementById('start_experience');

   startExperienteBtn.onclick = function(){
   document.getElementById('container').outerHTML = '';
   document.getElementsByTagName('a-scene')[0].style.zIndex = 'auto';
  };
</script>
</body>
</html>

我想制作一个Enter Room按钮。那个按钮必须是静态的而不是动态的。在场景应该隐藏之前。点击该按钮后会出现。如果我点击它，那么只去VR展厅。如果我点击它我的代码不起作用。问题是什么？

Answer 1

如果您想隐藏场景，有人点击该按钮，则可以从以下位置切换a-scene的css display属性：

点击

display: none到display:block。

您可以查看here。

在A-Frame中输入Showroom按钮

1 个答案: