代码之家 › 专栏 › 技术社区 › Dario Silva

将随机JSON对传递到aframe组件中

webvr aframe json

Dario Silva · 技术社区 · 6 年前

编辑3:代码现在可以跨多个对象工作(多亏了Noam),他还帮助实现了随机函数。我将在问题中的代码实现后对其进行更新。

编辑2:我已经接受了@Noam Almosnino的答案,现在正试图将其应用于一个包含许多对象的数组(未成功)。这是 Remix 链接请帮忙!

编辑:我收集了一些反馈,发现 this 介绍如何使用JSON的页面。解析函数。我已经对代码进行了编辑,以反映新的变化,但我仍然无法准确地找出缺失的内容。

原文:我想 this 前面的答案有助于我解析json文件并返回一个随机字符串及其相关对(例如Title Platform),但我无法让它工作。我的目标是将输出渲染为场景中的文本项。我真的很喜欢使用A-frame,但我很难找到可以在这方面帮助我的文档。我尝试使用以下修改后的脚本从Json文件中获取文本。。。

AFRAME.registerComponent('super', {  // Not working
schema: { 
Games: {type: 'array'}, 
jsonData: {
parse: JSON.parse,
stringify: JSON.stringify}
},
init: function () {
var el = this.el; 
el.setAttribute('super', 'jsonData', {src:"https://cdn.glitch.com/b031cbf1-dd2b-4a85-84d5-09fd0cb747ab%2Ftrivia.json?1514896425219"});
var hugeArray = ["Title", "Platform",...];   
const el.setAttribute('super', {Games: hugeArray}); 
el.setAttribute('position', {x:-2, y:2, z:-3}); 
} 
});

我的html中也设置了触发器来呈现文本。我的代码正在通过小故障处理。com,任何帮助都将不胜感激!

1 回复 | 直到 6 年前

Noam Almosnino 6 年前

要加载json,我认为需要使用XMLHttpRequest(正如Diego在注释中指出的那样),加载后,可以通过setAttribute设置文本。

下面是一个关于故障的基本示例: https://glitch.com/edit/#!/a-frame-json-to-text

在init上执行请求,然后在完成后,将加载的json文本设置到实体上。

AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var textEntity = document.querySelector('#text');
    var url = 'json/text.json';

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var jsonText = JSON.parse( event.target.response )
      textEntity.setAttribute("value", jsonText.text)

    } );
    request.send( null );
  }
});

更新版本: https://glitch.com/edit/#!/peppermint-direction

AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var textEntity = document.querySelector('#text');
    var url = 'json/text.json';

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var games = JSON.parse( event.target.response ).games;

      // Get a random game from the list
      var randomGame = games[Math.floor(Math.random()*games.length)];

      // Get the next game if it's available
      var nextGame = null
      if (games.indexOf(randomGame) < games.length - 1) {
        nextGame = games[games.indexOf(randomGame) + 1]
      }

      // Build the string for the games
      var gameInfo = randomGame.Title + '\n' + randomGame.Developer + '\n\n'
      if (nextGame != null) {
        gameInfo += nextGame.Title + '\n' + nextGame.Developer + '\n'
      }

      textEntity.setAttribute("value", gameInfo);
      var sceneEl = document.querySelector('a-scene');
      sceneEl.querySelector('a-box').setAttribute('material', {src:"https://cdn.glitch.com/4e63fbc2-a1b0-4e38-b37a-9870b5594af8%2FResident%20Evil.jpg?1514826910998"}); 
    });
    request.send( null );
  }
});