使用 ember.js 渲染 x3d indexedfacset

Question

我在 ember cli 框架中使用 x3d。 在旧版本的 ember 框架中，一切运行良好。 我最近更新了 ember.js。 ember.js 更新后，从 ember 应用程序开始，在 x3d 场景中显示 idexedfaceset 或 indexedlineset 是没有问题的。 但是现在在应用程序完全加载后将 idexedfaceset 或 indexedlineset 添加到场景中出现问题。 例如，请参阅下面的代码。 如果通过单击按钮将显示值设置为 true，应用程序会抛出错误：
未捕获的类型错误：无法在 x3dom.registerNodeType.defineClass.nodeChanged.nodeChanged (x3dom-full.js:4596) 处读取 null 的属性“getPoints”

我知道错误表明在 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

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

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

另一位评论者指出

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

Ember 渲染层从 Ember 1.x -> Ember 3.x 改变了很多。 在我看来，节点构建/附加到 DOM 的顺序的变化已经给你带来了这个问题，因为 x3dom 期待一个顺序并嵌入另一个。

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

<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}}并使用x3dom在直接通过javascript API @action 。

Answer 2

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