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

【问题标题】：Get raw A-frame code from scene从场景中获取原始 A 帧代码
【发布时间】：2017-02-23 15:07:31
【问题描述】：

我正在开发基于 Ace 的 A-Frame IDE。编辑器验证编写的 HTML 代码是否正确，如果正确，我只需将代码 innerHTML 放入另一个 div 以呈现场景。这种“编辑”方向是有效的。

我想要/无法开始工作：如果我现在使用例如移动场景中的对象A-Frame 检查员，我无法获得生成的纯 A-Frame 代码来在编辑器中显示操作值。有没有办法从场景中获取纯 A-Frame 代码以实现 IDE 和结果的完全同步？谢谢！

【问题讨论】：

标签： aframe

【解决方案1】：

使用debug 组件参见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
  }  
});

【讨论】：