Question

我有一个非常入门级的Javascript和构建Aframe的组件，我试图了解为什么以下不起作用。

我正在尝试创建可以使用数据输入设置的点，并使用曲线连接它们。到目前为止，这就是我所拥有的：

<a-assets>
    <script id="datapoint" type="text/nunjucks">
        <a-entity position="{{ point }}">
            <a-box></a-box>
        </a-entity>
        <a-curve id="{{ trackid }}" type="type:QuadraticBezier">
            <a-curve-point position="{{ curve1 }}"></a-curve-point>
            <a-curve-point position="{{ curve2 }}"></a-curve-point>
            <a-curve-point position="{{ curve3 }}"></a-curve-point>
        </a-curve>
        <a-draw-curve mixin="curvedline" curveref="{{ trackid }}"></a-draw-curve>
        <a-entity mixin="cloneline" clone-along-curve="curve:{{ trackid }};"></a-entity>
        <a-entity mixin="movingNode" scale="{{scale}}" alongpath="curve:{{ trackid }}; loop:{{ repeat }}; delay:{{ wait }}; dur:{{ duration }}"></a-entity>
    </script>
</a-assets>

<a-entity id="inputPoint" 
          template="src: #datapoint" 
          data-point="0 10 5" 
          data-curve1="0 10 5" 
          data-curve2="0 5 0" 
          data-curve3="0 0 -5" 
          data-trackid="#track1" 
          data-scale="1 1 1" 
          data-repeat="true" 
          data-wait="1000" 
          data-duration="1000">
</a-entity>

它正在创建框，但它不会使用例如的位置点。 {{曲线-1}}

仅当我删除脚本中的部分并使用set id定义它们时才有效：

 < <a-curve id="track1" type="type:QuadraticBezier">
            <a-curve-point position="0 10 5"></a-curve-point>
            <a-curve-point position="0 0 0"></a-curve-point>
            <a-curve-point position="0 0 -10"></a-curve-point>
</a-curve> 

<a-assets>
    <script id="datapoint" type="text/nunjucks">
        <a-entity position="{{ point }}">
            <a-box></a-box>
        </a-entity>
        <a-draw-curve mixin="curvedline" curveref="{{ trackid }}"></a-draw-curve>
        <a-entity mixin="cloneline" clone-along-curve="curve:{{ trackid }};"></a-entity>
        <a-entity mixin="movingNode" scale="{{scale}}" alongpath="curve:{{ trackid }}; loop:{{ repeat }}; delay:{{ wait }}; dur:{{ duration }}"></a-entity>
    </script>
</a-assets>

<a-entity id="inputPoint" 
          template="src: #datapoint" 
          data-point="0 10 5" 
          data-curve1="0 10 5" 
          data-curve2="0 5 0" 
          data-curve3="0 0 -5" 
          data-trackid="#track1" 
          data-scale="1 1 1" 
          data-repeat="true" 
          data-wait="1000" 
          data-duration="1000">
</a-entity>

有人可以帮助我并告诉我我没有得到或做错了吗？

非常感谢！

Answer 1

我发现的第一件事是你的项目有点错字。 ID前面还有一个额外的#。它应该像<a-curve id="#track1" type="type:QuadraticBezier">一样呈现id="track1"。我已更新到Glitch https://glitch.com/edit/#!/polite-wrench以传递到模板track1而不是#track1，并在需要的地方添加#。

我还看到间接需要布局组件。使用CDN链接而不是复制粘贴Web包的原始JS。

虽然仍有一些错误，白线没有渲染，但这是向前迈出的一步。

尝试使用nunjucks和aframe模板创建动态曲线。

1 个答案: