A-frame检查工具在Glitch中几乎没有功能

时间:2017-11-13 20:52:24

标签: html aframe

免责声明:我是a-frame和Stack Overflow的新手。

我一直在搞乱像这样的A帧模板: https://a-frobot.github.io/aframe/examples/test/text/sizes.html#

当我在上面运行检查器(ctrl-alt-i)时,检查员会加载,我可以移动零碎的碎片。

复制代码并将其移动到Glitch或CodePen,脚本会运行,但是当您打开检查器时,您无法与文本等实体进行交互。一切都是静态的,您只能通过更改中的值来进行更改。侧板。

必须要遗漏一些东西,但我对此很陌生,我不知道它是什么。任何帮助表示赞赏。

以下是我在Glitch和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>

1 个答案:

答案 0 :(得分:1)

不要手动添加画布,a-frame会为您完成。显然,一旦你将它放在场景元素中,它就会出现问题。

检查它是否正常工作:https://like-mistake.glitch.me/