代码之家 › 专栏 › 技术社区 › Anthony Scavarelli

资产架构属性如何与img资产一起工作?

aframe

Anthony Scavarelli · 技术社区 · 6 年前

我试图将图像作为资产属性类型传递给其他组件(以便可以传递#选择器或url(url)),但它似乎接收了整个html组件,而不仅仅是url。

<!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在material组件中是如何处理的,但看不到material上的“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

或

data.src.getAttribute('src');

1 回复 | 直到 6 年前

Developer Guy Adam 6 年前

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

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

也就是说,材料不需要 src 在模式中,因为它似乎是每个组件的一部分。此外,还有多个解析器,如 assetParse 或 src-loader ,检查属性是html元素,还是视频/图像资产。

至于材料部分,请查看dist源 code 哪里我想你要找的是:

module.exports.updateMapMaterialFromData

在这里可以看到a-frame团队使用的数据。并使用它更新纹理。给它一个 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装载机在行动中


   material

系统已注册


   src公司

属性,则


   validateSrc

函数触发两个回调之一:

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