bugfix> aframe > 投稿

Aフレームミックスイン に入る <a-assets> 素子、シーンをレンダリングする前に定義する必要があります。これは、画像やビデオなどを事前にロード/キャッシュするのに理にかなっていますが、ミックスインを動的に作成して使用する方法があるはずです。

ミックスインを <a-assets> に追加するだけ実行時に動作しないようです。の実行時に画像アセットを追加するための推奨事項は、画像ソースをインライン化し、マテリアルに直接設定することです。実行時にミックスインを定義/変更する同様の方法はありますか?または、ミックスインが適用されるすべてのオブジェクトに関連するプロパティを設定する必要があります(ミックスインチェーンの後半またはオブジェクト自体に直接他のミックスインによって設定されたプロパティにも注意してください)

編集:のように見えますaframe-asset-on-demand-component これは、画像/動画アセットに対してこれを行うように設計されています。ミックスインで機能するかどうかは不明ですが、1年で更新されていません。これは(半)公式に推奨されるソリューションですか?

回答 1 件
  • ご質問を誤解して申し訳ありませんが、実行時にアセットタグにミックスインを追加できるようです。基本バージョンは、次のようにコンポーネントを記述することを意味します。

    // add assets at run time
     AFRAME.registerComponent('addasset', {
            init: function () {          
              var assets = document.getElementsByTagName('a-assets')[0]
              var mixin = document.createElement('a-mixin')
              mixin.setAttribute('id', 'makeitred')
              mixin.setAttribute('material', 'color: red')
              assets.appendChild(mixin)
            },
     });
    
    

    そして、次のようにそのコンポーネントをシーンにアタッチします。

    <a-scene addasset>
      <a-assets>
      </a-assets>
      <a-cylinder 
        mixin="makeitred" 
        position="0 0.5 -3">
      </a-cylinder>
    </a-scene>
    
    

    ここに働くグリッチがあります


    ここでシーンが実行された後にそれを追加する方法を示すために、同じコンポーネントのバージョンが setTimeout である  後でミックスインを追加する方法を示します。

    // add assets at run time, delayed
          AFRAME.registerComponent('addasset', {
            init: function () {  
              setTimeout(function(){ 
                var assets = document.getElementsByTagName('a-assets')[0]
                var mixin = document.createElement('a-mixin')
                var cylinder = document.getElementsByTagName('a-cylinder')[0]
                mixin.setAttribute('id', 'makeitred')
                mixin.setAttribute('material', 'color: red')
                assets.appendChild(mixin)
                cylinder.setAttribute('mixin', 'makeitred')
              }, 2000);
            },
          });
    
    

    そして、後でmixin属性が追加されるHTML

    <a-scene addasset>
          <a-assets>
          </a-assets>
          <a-cylinder 
            position="0 0.5 -3">
          </a-cylinder>
    </a-scene>
    
    

    ここにグリッチがあります


    そして、調査のために、同じセットアップがありますが、サンプルイベントによってトリガーされます。最初は同じコンポーネントですが、イベントリスナーがあります

    // add assets at run time, triggered by event
          AFRAME.registerComponent('addasset', {
            init: function () {  
              document.addEventListener("testevent", function(){
                  var assets = document.getElementsByTagName('a-assets')[0]
                  var mixin = document.createElement('a-mixin')
                  var cylinder = document.getElementsByTagName('a-cylinder')[0]
                  mixin.setAttribute('id', 'makeitred')
                  mixin.setAttribute('material', 'color: red')
                  assets.appendChild(mixin)
                  cylinder.setAttribute('mixin', 'makeitred')
              });
            },
          });
    
    

    次に、テスト用のイベントを発行するコンポーネント

    // test event to trigger adding of mixin
      AFRAME.registerComponent('testevent', {
        init: function () {  
          var self = this.el
          setTimeout(function(){ 
            self.emit("testevent") 
          }, 3000);
        },
      });
    
    

    次に、以前と同様に、ただしイベントを発行するテストエンティティを含むHTML

    <a-scene addasset>
          <a-assets>
          </a-assets>
          <a-cylinder 
            position="0 0.5 -3">
          </a-cylinder>
          <a-entity 
            testevent>
          </a-entity>
    </a-scene>
    
    

    そして、ここにグリッチがあります

    そのため、これらを混ぜ合わせて、アセットにミックスインを追加しますが、プロパティの追加時にイベントの遅延/トリガー、またはプロパティを持つアセットにミックスインを追加し、ターゲット要素の属性の設定時にイベントの遅延/トリガーを追加します。

    それがお役に立てば幸いです

あなたの答え