使用 ember.js 渲染 x3d indexedfacset

Question

我在 ember cli 框架中使用 x3d。在旧版本的 ember 框架中，一切运行良好。我最近更新了 ember.js。在 ember.js 更新后，从 ember 应用程序开始在 x3d 场景中显示 idexedfaceset 或 indexedlineset 是没有问题的。但是现在在应用完全加载后，在场景中添加idexedfaceset或者indexedlineset会出现问题。例如，请参见下面的代码。如果通过单击按钮将显示值设置为真，则应用程序会抛出错误：
Uncaught TypeError: 无法读取属性 '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

As far as I can tell, it has nothing to do with d3 or jquery and has everything to do with appending the indexed set before appending the coordinate using DOM functions which affect both d3 and jquery. Appending the coordinate to the indexed set and then appending the indexed set to the rest of the DOM should work fine.

另一位评论者指出

For me, the node isn’t there yet, since I am creating DOM from JSON. The solution was to build the child node first, then add it to the parent, then add the parent. Before that, the code would die in the appendChild.

Ember渲染层从Ember1.x->Ember3.x变化很大。在我看来，节点从 built/appended 到 DOM 的顺序发生变化导致了这个问题，因为 x3dom 需要一个顺序而 ember 另一个。

您当前问题的第一个快速解决方案是避免将 <transform> 元素包装在 {{#if}} 块中以隐藏/显示，因为这会删除/读取 DOM x3dom 不知道的方式。相反，使用 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}} 中，并通过 javascript 在 [=] 中直接使用 x3dom API 18=]。

Answer 2

很有趣的是，其他帖子是 2014/2015 年的。自 2015 年 7 月以来，我一直在研究这些主题，到目前为止一切进展顺利。生成具有多个 ember 组件且无需更新 ember 的 x3d 场景是没有问题的。 ;)
我预计 ember 更新会有一些变化。我怀疑和你一样，节点从 built/appended 到 DOM 的顺序发生了变化。
对于我的默认场景，我使用渲染属性来隐藏和显示现在的元素。我将通过在 @action 中使用 x3dom API via javascript 隐藏和显示所有其他内容，直到有另一个解决方案。很遗憾我不能像以前那样使用 ember 组件，因为我认为它们是为创建个人标签而制作的。非常感谢您的努力。

使用 ember.js 渲染 x3d indexedfacset

Rendering x3d indexedfacset with ember.js

javascript

x3d

ember.js