2016-12-26 16 views
3

私は何かをクリックして新しいシーンを表示できるAFrameアプリケーションを作成しようとしています。そこから、ユーザーは何か他のものをクリックすることができます。このシーンのデータはAPIから取得されるので、ユーザーが遭遇する可能性のあるすべてのシーンを知るのは難しいです。AFrameで新しいエンティティを即座に追加

これを念頭において、実行時にAFrameシーンを変更するにはどうすればよいですか?明らかにDOMを変更することはできませんが、AFrameに特定の時間にシーンを再レンダリングさせる方法があれば、それはすばらしいことになります。これにアプローチする別の方法があると思うなら、それを聞いて欲しいです。ありがとう!

答えて

3

実際に実行時にDOMを変更すると、シーンに影響します。ここでthis projectから取られたのjQueryを使用して新しいオブジェクトを追加する例です:

function appendObject(id, file, scale, position, rotation, scale) { 
     $('<a-obj-model />', { 
      id: id, 
      class: 'city object children', 
      position: position, // doesn't seem to do anything, known issue 
      scale: scale, 
      rotation: rotation, 
      file: file, 
      src: '#' + file + '-obj', 
      mtl: '#' + file + '-mtl', 
      appendTo : $('#city') 
     }); 
     document.getElementById(id).setAttribute("position", position); // this does set position as a workaround 
     } 

そしてここでは、オブジェクトを削除する例を示します。

onMenuDown: function() { 
     previousObject = document.querySelector("#object" + (objectCount - 1)); 
     previousObject.parentNode.removeChild(previousObject); 
     objectCount -= 1; 
     if(objectCount == -1) {objectCount = 0}; 
    }, 
+0

Hmmm ...私がDOMを更新すると、私は[このエラー](http://imgur.com/a/I8pfi)になりますオブジェクトを追加しようとします。この原因を知っていますか? – hyperdo

+0

実際には、タグの後に追加していましたが、今は動作します。 – hyperdo

4

ただ、今後の参考のためにあなたはすでにあなたの問題を解決したので、通常のJS DOM APIを使用することができます:

var el = document.createElement('a-entity'); 
document.querySelector('a-scene').appendChild(el);