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

Question

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

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

Answer 1

你可以define your own property type in the schema that parses data how you wish。

要解析组件中的JSON，请创建执行parse的{​​{1}}函数：

JSON.parse

然后使用组件：

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

或者：

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

Answer 2

另一种方法是将组件设置为没有架构，因此它只需要一个对象。没有API可以拥有“通配符”模式，但一种方法是使用一个属性类型，用styleParser解析类似内联CSS的字符串：

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>