CODEWITHSUNDEEP
htmlaframe
lyb
lyb

Reputation: 21

A-frame inspector tool has little to no functionality in Glitch

Disclaimer: I am brand new to a-frame and Stack Overflow.

I have been messing around with A-frame templates like this one: https://a-frobot.github.io/aframe/examples/test/text/sizes.html#

When I run the inspector on the above (ctrl-alt-i) the inspector loads and I can move bits and pieces around.

Copy the code and move it to Glitch or CodePen, the script runs but when you open the inspector you cannot interact with the entities like the text, etc. Everything is static and you can only make changes by changing the values in the side panel.

Something must be missing but I am so new to this I have no idea what it is. Any help is appreciated.

Here is the code I have been putting into Glitch and CodePen:

<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-
    component@^0.5.0/dist/aframe-text-geometry-component.min.js"></script> 
<title>Text Sizes</title>
<meta name="description" content="Text Sizes - A-Frame" />
<script src="../../../dist/aframe-master.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?
    family=Roboto%7CRoboto+Mono" media="all" />
</head>
  <body class="a-body ">
    <a-scene class="fullscreen" inspector="" keyboard-shortcuts="" 
    screenshot="" vr-mode-ui=""><canvas class="a-canvas" data-aframe-
    canvas="true" width="600" height="300"></canvas>
  <a-assets>
    <a-mixin id="text" text="align: center; width: 6;
           value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut enim ad minim veniam"></a-mixin>
  </a-assets>

  <a-text mixin="text" position="-3 0 0" wrap-count="20" text=""></a-text>
  <a-text mixin="text" position="-3 2 0" wrap-count="30" text=""></a-text>
  <a-text mixin="text" position="-3 3 0" wrap-count="40" text=""></a-text>
  <a-text mixin="text" position="-3 3.5 0" wrap-count="50" text=""></a-text>
  <a-text mixin="text" position="-3 4 0" wrap-count="60" text=""></a-text>
  <a-text mixin="text" position="-3 4.5 0" wrap-count="70" text=""></a-text>
  <a-text mixin="text" position="-3 5 0" wrap-count="80" text=""></a-text>

  <a-text mixin="text" font="kelsonsans" position="3 0 0" wrap-count="20" 
    text=""></a-text>
  <a-text mixin="text" font="kelsonsans" position="3 2 0" wrap-count="30" 
    text=""></a-text>
  <a-text mixin="text" font="kelsonsans" position="3 3 0" wrap-count="40" 
    text=""></a-text>
  <a-text mixin="text" font="kelsonsans" position="3 3.5 0" wrap-count="50" 
      text=""></a-text>
  <a-text mixin="text" font="kelsonsans" position="3 4 0" wrap-count="60" 
    text=""></a-text>
  <a-text mixin="text" font="kelsonsans" position="3 4.5 0" wrap-count="70" 
    text=""></a-text>
  <a-text mixin="text" font="kelsonsans" position="3 5 0" wrap-count="80" 
    text=""></a-text>

  <a-sky color="#3CF" material="" geometry=""></a-sky>
  <a-entity position="0 2 3.7">
    <a-entity camera="" look-controls="" wasd-controls="" data-aframe-
inspector-original-camera=""></a-entity>
  </a-entity>
</a-scene>


</body></html>

Upvotes: 2

Views: 796

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

Don't add the canvas manually, a-frame does it for you. And apparently it gets buggy once you put it inside the scene element.

Check it out working properly: https://like-mistake.glitch.me/

Upvotes: 2

Related Questions