A-frame：如何将使用 3d 小部件所做的检查器更改保存到剪贴板

Posted 2023-02-25

【中文标题】A-frame：如何将使用 3d 小部件所做的检查器更改保存到剪贴板

【英文标题】：A-frame: How to save inspector changes made with the 3d widget to the clipboard

【发布时间】：2019-03-06 12:32:17

【问题描述】：

我正在使用 a-frame 检查器来更改对象的位置、旋转和比例。然后我使用copy entity html to clipboard 函数。

我注意到，如果我通过在右侧栏中输入新值来进行更改，则更改会被保存出来。但是，如果我使用 3D 小部件进行更改，则不会。

示例工作流程：

添加一个框

<a-box></a-box>

查看页面，框位置在0 0 0。

带有 3D 小部件的移动框，值在右侧列中更新。

按copy entity HTML to clipboard 并粘贴回编辑器，这就是结果。

<a-box material="" geometry=""></a-box>

如您所见，位置更改未保存。

但是，如果我更改右侧列中的值，它们会被保存。我注意到，当我也这样做时，position 标签（或任何受影响的元素）会变为粗体，以表明已进行了更改。

这是预期的行为吗？如果是这样，那是为什么？如果能够简单地使用小部件手动移动、旋转和缩放并保存这些更改，那就太好了。

或者我做错了什么？任何建议都非常感谢。

【参考方案1】：

可能是由于 DOM 和 CPU 的性能问题。 A-Frame 只会在调试模式下更新组件在实际 DOM 中的序列化表示。

您可以使用 flushToDOM() 手动更新组件，但我也遇到了这个错误，组件位置值不会使用 3D 编辑器更新，它们只会在我选择面板上的值时更新。

在更新值的面板上选择位置/旋转/缩放组件时，似乎某些功能正在运行。

我已经打开了一个问题。

https://github.com/aframevr/aframe/issues/4084

让我们看看他们是否可以帮助我们。

BR

【参考方案2】：

使用flushToDom()，您可以强制将属性持久化到 html 元素。

let box = document.query('a-box');
box.flushToDom();

现在当您copy entity HTML to clipboard 时，HTML 应该包含您所期望的所有属性。

在文档中了解有关此功能的更多信息：https://aframe.io/docs/0.9.0/core/component.html#flushtodom