Aframe 尝试使用Nunjuck和框架模板创建动态曲线。

我有一个非常入门级的Javascript，并为一个框架构建组件，我试图弄清楚为什么下面的内容不起作用

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

<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>

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

仅当我删除脚本中的节并使用集合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>

<

有人能帮我一下，告诉我我没有做错什么吗

---

多谢各位

我发现的第一件事是你的项目有点输入错误。ID前面有一个额外的

#

。传递到模板

track1

而不是

#track1

并在需要的地方预加

#

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

---

尽管仍然存在一些错误，白线没有呈现，但这是向前迈出的一步。

是“{trackid}}”没有在字符串中注入字符串吗？当您打开开发工具时，控制台会打印什么？它会输出大量帧错误，所有错误都从以下内容开始：“未捕获（承诺中）TypeError:无法读取元素选项卡中的属性'addEventListener'为null”，但当我正确设置自定义trackID时，它会输出数据曲线位置，它只是没有显示实际的曲线。其他模板变量可以工作吗？如果在模板中硬编码位置，会发生什么？A-Frame+模板的哪个版本？看起来您也不需要NUNJUCK，可以使用默认的模板字符串模板

position=“${curve1}”

。Hi@ngokevin，将位置硬编码而不是例如。${curve1}输出正确，但也不起作用。我正在运行主A帧和最新的模板代码。看起来没有修女也行！将所有的“{}}”转换为“${}”，同样的东西似乎可以工作和中断。只是现在，随着webVR UI的显示，场景被渲染为白色。抱歉，我弄糊涂了。它输出正确，但不工作？它没有修女也能用，但它坏了？我明白了，谢谢！当我把这条线放好的时候，我已经画好了线“使用您的类型修复在脚本之外的曲线点！”：）那么这是否意味着你不能将其放入脚本中？我现在要试试别的东西。我使用原始JS，因为当我在本地打开文件时，它的加载速度似乎相当慢。它应该可以工作，需要进一步深入研究才能看到发生了什么。一旦我解决了第一个问题，我就不再看它了。