资产架构属性如何与 img 资产一起使用？答案

【问题标题】：How does the asset schema property work with img assets?资产架构属性如何与 img 资产一起使用？
【发布时间】：2018-03-26 16:49:53
【问题描述】：

我正在尝试将图像作为资产属性类型传递给其他一些组件（以便可以传递 #selector 或 url(url)），但它似乎包含整个 html 组件，而不仅仅是网址。

<!DOCTYPE html>
<html>
    <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name='description' content='Hello, WebVR! - A-Frame'>
    <script src='../../global/js/aframe-v0.8.0.min.js'></script>

    <script>
        AFRAME.registerComponent('some-component', {
            schema: {
                image:  {type:'asset',      default:''},
                model:  {type:'asset',      default:''}
            },
            init: function() {
                console.log(this.data.image);   //prints out <img id="SomeImage" src="../../someDir/someFile.jpg">
                console.log(this.data.model);   //prints out '../../someDir/someModel.gltf'
            }
        });
    </script>
    </head>
    <body>
    <a-scene >
        <a-assets timeout='3000'>
            <!-- this works as an asset no problem -->
            <a-asset-item id='SomeModel' src='../../global/assets/models/gltf/UserHead/UserHead.gltf'></a-asset-item>

            <!-- this does not pass as an asset but rather an html element -->
            <img id='SomeImage' src='../../global/assets/textures/equirectangular/CloudySky.jpg'>
        </a-assets>

        <a-entity some-component='image:#SomeImage; model:#SomeModel;'></a-entity>
    </a-scene>
    </body>
</html>

我想我可能会看看 A-Frame 如何在材质组件中处理这个问题，但看不到材质上的“src”属性来自哪里？

<a-entity id='skyBox'
            geometry='primitive:sphere; radius:50; segments-height:6; segments-width:6;'
            material='shader:flat; src:#skyMap; side:back; height:2048; width:2048'>
</a-entity>

材质组件（看不到src）：https://github.com/aframevr/aframe/blob/master/src/components/material.js

谢谢！

编辑：

根据 Piotr 在下面的发现，看起来图像是作为一种特殊情况处理的，就像在 src 代码 here with frame 0.8.0 中一样，图像源是这样处理的：

hash: function (data) {
    if (data.src.tagName) {
        // Since `data.src` can be an element, parse out the string if necessary for the hash.
        data = utils.extendDeep({}, data);
        data.src = data.src.src;
    }
    return JSON.stringify(data);
},

所以基本上，如果我们的资产属性将无法正确处理图像的图像，并通过额外的步骤从图像中获取 url

data.src.src

或

data.src.getAttribute('src');

【问题讨论】：

标签： aframe

【解决方案1】：

如果我错了，请纠正我，但我认为它不在材料架构中。

我认为component.js 是魔鬼，它似乎不仅允许您为任何给定属性分配值，而且还具有任何组件的构造函数，并解析模式。

话虽如此，该材料不需要架构中的src，因为它似乎是每个组件的一部分。此外，还有多个解析器，例如 assetParse 或 src-loader，检查属性是否是 html 元素，甚至是视频/图像资产。

至于材质部分，查看dist源code，其中我认为您正在寻找的是：

module.exports.updateMapMaterialFromData

您可以在其中看到 a-frame 团队使用 data.src 作为材质，并使用它更新纹理。只需给它一个 ctrl+F （只有 3 次点击）。

所以当

module.exports.updateMapMaterialFromData('map', 'src', shader, data);

被调用，具有给定的定义：

module.exports.updateMapMaterialFromData = function (materialName, dataName, shader, data) {
  var el = shader.el;
  var material = shader.material;
  var src = data[dataName];
  .......

使src = data[src] => 他们使用局部变量 src 进行更新。

您还可以看到src-loader 在注册material 系统的操作中，当发现src 属性时，validateSrc 函数会触发两个回调之一：

utils.srcLoader.validateSrc(src, loadImageCb, loadVideoCb);

【讨论】：

感谢您指出正确的方向。最后，我们现在似乎必须编写一个额外的案例来处理 img 资产。已编辑的问题，但会接受您的答案。
@Anthony，很高兴我能帮上忙，我几乎可以肯定，当您创建一个组件时，构造函数会解析架构（“component.js 中的 491 附近的somwhere），我希望有人来自-frame 团队确认这一点，或者如果我错了，请纠正我:)