从场景中获取原始A帧代码

Question

我正在开发基于Ace的A-Frame IDE。 如果编写的HTML代码是正确的，编辑器会验证，如果是这样，我只需将代码内部HTML格式化为另一个div来渲染场景。这个方向＆＃34;编辑＆＃34;的工作原理。

我想要/无法上班的事情： 如果我现在使用例如移动场景中的对象A-Frame检查员， 我不能得到生成的简单A帧代码来在编辑器中显示被操纵的值。 有没有办法从场景中获取简单的A-Frame代码来实现IDE和结果的完全同步？ 谢谢！

Answer 1

使用debug组件cf https://aframe.io/docs/0.5.0/components/debug.html。它向DOM刷新属性。请注意，如果要将其隐藏起来，也可以使用document.querySelector('a-scene').flushToDOM(true);以编程方式调用它。

这是一个基本示例http://jsbin.com/nuwoxu/edit?html,output

AFRAME.registerComponent('toeditor', {
  init: function(){    
    this.flushToDOM(true)
    console.log(this.el.innerHTML
      .replace(/<canvas.*/,"")
      // clean the injected canvas
      .replace(/\w+="" /g, ""))
      // clean empty attributes, using defaults
  }  
});