Aframe 将纹理贴图从用户输入传递到A帧组件

已经在THREE.js上实现了这个功能，现在想在我的A-Frame组件中添加相同的功能。我有一个用户图像输入对话框，下面的脚本在图像更改时运行。问题是如何通过组件传递这些数据？架构似乎以某种方式修改了数据，因为文档内部的console.log输出与组件不同

在HTML文档中：

n{uuid:“6682DFA3-78C6-4BC6-9C5C-C2430A046D73”，名称：，源文件：，图像：img，mipmap: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]);
    }
});

组件内部：

字符串{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”，名称：，“源文件：”，图像：img，mipmap: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纹理返回与下面的var纹理相似的数据

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

---

如果只想传递一个大对象，可以修改模式以获取JSON

js
AFRAME.registerComponent（'foo'{
模式：{
parse:JSON.parse
}
});

然后可以作为JSON传入。或者，如果执行

.setAttribute

，A-Frame将不会执行解析（

.setAttribute（'foo'，{yourData}）

）