rs-base element spawning in aframe

Question

rs-base element spawning in aframe

72 Views Asked by Gerben Mol At 19 October 2024 at 21:47

I am trying to build a frame vr world but when i load the website i get in the top left corner a element with the class name: rs-base the code is:

<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/[email protected]/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/[email protected]/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>

I have commented all the scripts that are already on my system to see if this caused the problem but this didnt solve the problem. I saw the element gets created at the aframe.min.js file but i dont know how to stop it from loading in

Original Q&A

There are 1 best solutions below

**Piotr Adam Milewski** · Accepted Answer

rs-base is a class used by the stats UI. You can toggle the UI by simply adding / removing the stats attribute to/from the scene (click the button):

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 element spawning in aframe

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in AFRAME

Related Questions in AFRAME-NETWORKED

Trending Questions

Popular # Hahtags

Popular Questions