使用 ember.js 渲染 x3d indexedfacset

Question

我在 ember cli 框架中使用 x3d。在旧版本的 ember 框架中，一切运行良好。我最近更新了 ember.js。在 ember.js 更新之后，从 ember 应用程序开始在 x3d 场景中显示 idexedfaceset 或 indexedlineset 是没有问题的。但是现在在应用程序完全加载后，在场景中添加 idexedfaceset 或 indexedlineset 存在问题。例如看下面的代码。如果通过单击按钮将显示值设置为 true，则应用程序会抛出错误：
未捕获的 TypeError: Cannot read property 'getPoints' of null at x3dom.registerNodeType.defineClass.nodeChanged.nodeChanged (x3dom-full.js:4596)

我了解错误表明在 x3d 检测到添加节点并尝试渲染它的那一刻缺少坐标标记。之后我检查了 html 代码，坐标标记在它应该在的位置。但是该元素不会显示在 x3d 场景中。添加坐标标签似乎有短暂的延迟。
我知道可以使用 $("#scene").append("...") 之类的 jquery 逗号来显示元素。但我想使用 ember 行为，因为我更喜欢计算位置和尺寸。 如果有人可以帮助解决问题，我会很高兴。非常感谢。

//application.hbs
{{#if this.display}}
  <transform>
    <shape def="" ispickable="0" bboxsize="-1,-1,-1" bboxcenter="0,0,0" render="true">
      <appearance sorttype="auto" alphaclipthreshold="0.1">
        <material specularcolor="0,0,0" shininess="0.2" emissivecolor="0,0,0" ambientintensity="0.2" transparency="0.5" diffusecolor="0 0 1">
        </material>
      </appearance>
      <indexedfaceset ccw="true" colorpervertex="false" colorindex=" 0 0 0 0" coordindex="0 3 2 1 0" solid="true" usegeocache="true" lit="true" normalpervertex="true" normalupdatemode="fast" convex="true" >

        <coordinate point="-1 0 0, -1 1 0, 1 1 0, 1 0 0"></coordinate>

        <color color="0 0 1"></color>
      </indexedfaceset>
    </shape>
  </transform>
{{/if}} ```

Answer 1

您的最新更改终于让我能够运行该项目。在研究你的问题时，我发现了一个similar issue

据我所知，它与 d3 或 jquery 无关，并且有 与在附加索引集之前附加索引集有关的一切 使用影响 d3 和 jquery 的 DOM 函数进行协调。 将坐标附加到索引集，然后附加 indexed 设置为 DOM 的其余部分应该可以正常工作。

另一位评论者指出

对我来说，节点还不存在，因为我正在从 JSON 创建 DOM。 解决方案是先构建子节点，然后将其添加到 父级，然后添加父级。在此之前，代码会死在 appendChild。

Ember 渲染层从 Ember 1.x -> Ember 3.x 发生了很大变化。在我看来，节点构建/附加到 DOM 的顺序发生了变化，这给您带来了这个问题，因为 x3dom 期望一个订单而余烬另一个。

您当前问题的第一个快速解决方案是避免将<transform> 元素包装在{{#if}} 块中以进行隐藏/显示，因为这会以x3dom 不知道的方式删除/读取DOM。而是使用x3dom render 属性控制可见性

<transform render="{{if this.display "true" "false"}}">
  <shape def="" ispickable="0" bboxsize="-1,-1,-1" bboxcenter="0,0,0" render="true">
    <appearance sorttype="auto" alphaclipthreshold="0.1">
      <material specularcolor="0,0,0" shininess="0.2" emissivecolor="0,0,0" ambientintensity="0.2" transparency="0.5" diffusecolor="0 0 1">
      </material>
    </appearance>
    <indexedfaceset ccw="true" colorpervertex="false" colorindex=" 0 0 0 0" coordindex="0 1 2 3 0" solid="true" usegeocache="true" lit="true" normalpervertex="true" normalupdatemode="fast" convex="true" >

        <coordinate point="-2 -2 0, 0 -2 0, 0 0 0, -2 0 0"></coordinate>

      <color color="0 0 1"></color>
    </indexedfaceset>
  </shape>
</transform>

或者，您还需要避免将<transform> 包装在{{#if}} 中，并通过@action 中的javascript 直接使用x3dom API。

Answer 2

很有趣的是，其他帖子来自 2014/2015 年。自 2015 年 7 月以来，我一直在研究这些主题，到目前为止，一切都运行良好。生成带有多个 ember 组件且不更新 ember 的 x3d 场景是没有问题的。 ;)
我预计 ember 更新会发生一些变化。我怀疑和你一样，节点构建/附加到 DOM 的顺序已经改变。
对于我的默认场景，我使用 render 属性从现在开始隐藏和显示元素。 我将通过 @action 中的 javascript 使用 x3dom API 隐藏和显示其他所有内容，直到有另一个解决方案。 很遗憾我不能像以前那样使用 ember 组件，因为我认为它们是为创建单独的标签而设计的。非常感谢您的努力。