Question

我正在尝试将图像作为资产属性类型传递给其他组件（以便可以传递#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);
},

所以基本上如果一个图像我们资产属性不能正确处理图像，另外一步是通过

抓取网址

data.src.src

OR

data.src.getAttribute('src');

Answer 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] =＆gt;他们使用局部变量src进行更新。

<小时/> 此外，您还可以看到注册了material系统的src-loader，并且当找到src属性时，validateSrc函数会触发两个回调中的一个：

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

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

1 个答案: