Question

使用 ember.js 渲染 x3d indexedfacset

2020-03-31

159

javascript ember.js x3d

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

我理解错误表示此时 x3d 检测到添加了节点并尝试渲染它时缺少坐标标签。之后我检查了 html 代码，发现坐标标签在它应该在的位置。但是元素没有显示在 x3d 场景中。添加坐标标签似乎有短暂的延迟。
我知道可以使用 jquery 命令（如 $("#scene").append("...")）显示元素。但我想使用 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

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

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 渲染层从 Ember 1.x 到 Ember 3.x 发生了很大变化。在我看来，节点构建/附加到 DOM 的顺序的变化导致了这个问题，因为 x3dom 期望一个顺序，而 ember 期望另一个顺序。

解决当前问题的第一个快速方法是避免将 <transform> 元素包装在 {{#if}}}code> 块中以进行隐藏/显示，因为这会以 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}}}code> 中，而是直接通过 javascript 在 @action 中使用 x3dom API。

Answer 2

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