Question

使用THREE.js已经有了这个功能，现在想要为我的A-Frame组件添加相同的功能。我有一个用户图像输入对话框，下面的脚本在图像更改时运行。问题是我如何通过组件传递这些数据？ Schema似乎以某种方式修改数据，因为文档内部的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 texture返回与下面的var texture类似的数据。

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 Component

1 个答案: