Передача текстурной карты с пользовательского ввода на компонент A-Frame

Question

Получил эту работу, уже работающую с THREE.js, и теперь хочу добавить те же функции к моему компоненту A-Frame. У меня есть диалоговое окно ввода пользовательского изображения, и приведенный ниже сценарий запускается при изменении изображения. Вопрос в том, как передать эти данные через компонент? Кажется, что схема каким-то образом изменяет данные, поскольку вывод console.log изнутри документа в сравнении с компонентом отличается!

В HTML документе:

n {uuid: "6682DFA3-78C6-4BC6-9C5C-C2430A046D73", name: "", sourceFile: "", image: img, mipmaps: Array[0]…

Внутри компонента:

String {0: "e", 1: "m", 2: "p", 3: "t", 4: "y", 5: "T", 6: "e", 7: "x", 8: "t", 9: "u", 10: "r", 11: "e", uuid: "6682DFA3-78C6-4BC6-9C5C-C2430A046D73", name: "", sourceFile: "", image: img, mipmaps: Array[0]…

$("#userImage").change(function() { 
    var image = document.createElement('img'); 
    var texture = new THREE.Texture(image); 
    image.onload = function() { 
      texture.needsUpdate = true; 
      // Helper is entity which has component with the shader 
      helper.setAttribute('myComponent', { 
       texture: texture 
      }); 
     }; 

    userImage = $("#userImage")[0]; 
    if (userImage.files && userImage.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      image.src = e.target.result; 
     }; 

     reader.readAsDataURL(userImage.files[0]); 
    } 
}); 

вар текстуры выше возвращает аналогичные данные в виде текстуры вар ниже.

var loader = new THREE.TextureLoader(manager); 
var texture = loader.load('img/image.jpg'); 

Answer 1

Если вы хотите передать только большой объект, вы можете изменить схему, чтобы взять JSON.

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

Затем вы можете передать в качестве JSON. Или, если вы делаете .setAttribute, A-Frame не будет обрабатывать (.setAttribute('foo', {yourData})).