rs-base 元素在框架中产生

Question

我正在尝试构建一个框架虚拟现实世界，但是当我加载网站时，我在左上角看到了一个名为 class 的元素：rs-base 代码是：

<html>
  <head>
    <meta charset="utf-8">
    <title>Tracked Controllers — Networked-Aframe</title>
    <meta name="description" content="Tracked Controllers — Networked-Aframe">

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
    <!-- <script src="dist/aframe.min.js"></script> -->
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script src="js/sync.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    <script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
  </head>

  <body>
    <input
      id="username-overlay"
      style="z-index: 100; bottom: 24px; left: 24px; position:fixed;"
      oninput="document.getElementById('local-avatar').setAttribute('player-info', 'name', this.value)"
    />
    <a-scene
      stats
      networked-scene="
        room: handcontrollers;
        debug: false;
    ">
    <a-assets>
      <a-asset-item id="left-hand-model" src="./assets/leftHandHigh.glb"></a-asset-item>
      <a-asset-item id="right-hand-model" src="./assets/rightHandHigh.glb"></a-asset-item>

      <template id="camera-rig-template">
        <a-entity></a-entity>
      </template>

      <template id="head-template">
        <a-entity class="avatar" player-info>
          <a-sphere class="head" scale="0.2 0.22 0.2" ></a-sphere>
          <a-entity class="face" position="0 0.05 0" >
            <a-sphere class="eye" color="white" position="0.06 0.05 -0.16" scale="0.04 0.04 0.04" >
              <a-sphere class="pupil" color="black" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
            </a-sphere>
            <a-sphere class="eye" color="white" position="-0.06 0.05 -0.16" scale="0.04 0.04 0.04">
              <a-sphere class="pupil" color="black" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
            </a-sphere>
          </a-entity>
          <a-text class="nametag" value="?" rotation="0 180 0" position=".25 -.35 0" side="double" scale=".5 .5 .5"></a-text>
        </a-entity>
      </template>

      <template id="left-hand-template">
        <a-entity>
          <a-gltf-model class="tracked-left-hand" rotation="0 0 90" src="#left-hand-model"></a-gltf-model>
        </a-entity>
      </template>

      <template id="right-hand-template">
        <a-entity>
          <a-gltf-model class="tracked-right-hand" rotation="0 0 -90" src="#right-hand-model"></a-gltf-model>
        </a-entity>
      </template>
    </a-assets>

      <a-entity environment="preset:starry; groundColor: #000000;"></a-entity>
      <a-entity light="type:ambient; intensity:.5"></a-entity>
      <a-entity id="camera-rig"
                tracked-vr-hands
                movement-controls="fly:false;"
                networked="template:#camera-rig-template;"
      >
        <a-entity id="local-avatar" camera position="0 1.6 0" look-controls
                  networked="template:#head-template;" visible="false">
        </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

我已经对我系统上已有的所有脚本进行了评论，以查看这是否导致了问题，但这并没有解决问题。我看到元素是在 aframe.min.js 文件中创建的，但我不知道如何阻止它加载到

Answer 1

rs-base 是 stats UI 使用的 class。您可以通过简单地添加/删除 stats 属性来切换 UI to/from 场景（单击按钮）：

const scene = document.querySelector("a-scene");
const btn = document.querySelector("button")
btn.addEventListener("click", evt => {
  if (scene.getAttribute("stats")) {
    scene.removeAttribute("stats")
  } else {
    scene.setAttribute("stats", "")
  }
})

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<button style="z-index: 9999; position: fixed; top: 0; left: 0">toggle</button>
<a-scene stats>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

rs-base 元素在框架中产生

rs-base element spawning in aframe

html

javascript

aframe

aframe-networked