A-Frame：実行時にミックスインを動的に定義する方法

bugfix> aframe > 投稿 2020-08-22 17:53

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

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

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

aframe

回答 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>

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

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

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

bugfix

A-Frame：実行時にミックスインを動的に定義する方法

aframe

関連記事