将纹理贴图从用户输入传递到 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]);
    }
});

上面的可变纹理 returns 与下面的可变纹理相似的数据。

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}))。

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

Passing texture map from user input to A-Frame Component

aframe