如何将 JSON 数据加载到 A-Frame 组件中？

Question

将自定义 JSON 文件作为数据加载到 A 框架组件中的最佳方法是什么？例如，JSON 文件可能包含点的坐标。我想将文件作为资产加载并在组件中使用已解析的 json 对象。

{"coordinates": [{"x": 0, "y": 1, "z": 2}, // ...]}

Answer 1

要从组件解析 JSON，请创建一个 parse 函数来执行 JSON.parse:

AFRAME.registerComponent('foo', {
  schema: {
    jsonData: {
      parse: JSON.parse,
      stringify: JSON.stringify
    }
  }
});

然后使用组件：

el.setAttribute('foo', 'jsonData', yourJsonData);

或：

<a-entity foo='jsonData: {"coordinates": [{"x": 0, "y": 1, "z": 2}]}'></a-entity>

Answer 2

另一种方法是将您的组件设置为没有模式，这样它只需要一个对象。目前还没有 API 具有 "wildcard" 模式，但一种方法是使用属性类型来使用 styleParser 解析内联-CSS-like 字符串：

AFRAME.registerComponent('foo', {
  schema: {
    parse: AFRAME.utils.styleParser.parse
  }
});

上面的组件是一个单属性模式，所以我们传递的任何对象都将成为this.data的值：

el.setAttribute('foo', {bar: 'baz', qux: 'qaz', whateverWeWant: true});

或者：

<a-entity foo="bar: baz; qux: qaz: whateverWeWant: true"></a-entity>

How to load JSON data into an A-Frame component?