8

A-Frame は、マークアップ/HTML だけで仮想現実体験を構築するために使用されているようです。A-Frame マークアップ要素と一緒に JavaScript を使用するにはどうすればよいですか?

4

1 に答える 1

13

A-Frame は JavaScript/three.js フレームワークであり、HTML は最も外側の宣言レイヤーにすぎません。

DOM の操作

https://aframe.io/docs/0.2.0/core/entity.html

A-Frame のすべての要素/オブジェクトはエンティティです。これらの要素は、標準の DOM メソッドを使用して操作できます。

var boxEl = document.querySelector('a-box');
boxEl.setAttribute('width', 5);
boxEl.setAttribute('color', '#FFF');
boxEl.addEventListener('click', function () {
  // If we are using the cursor component.
  boxEl.setAttribute('color', '#FFF');
});
boxEl.emit('some-event');
boxEl.removeAttribute('color');
boxEl.querySelectorAll('a-sphere');

var sphereEl = document.createElement('a-sphere');
sphereEl.setAttribute('radius', 1);
document.querySelector('a-scene').appendChild(sphereEl);
sphereEl.addEventListener('loaded', function () {
  console.log('sphere attached');
});

エンティティ コンポーネント

https://aframe.io/docs/0.2.0/core/

A-Frame は、ゲーム開発で人気があり、React や PlayCanvas などのエンジンで使用されるエンティティ コンポーネント システム パターン (ECS) に基づいて構築されています。ECS では、すべてのオブジェクト (またはエンティティ) は、コンポーネントを構成することによってゼロから作成されます (Web コンポーネントと混同しないでください)。コンポーネントは、エンティティにロジック、動作、外観を追加します。

https://aframe.io/docs/0.2.0/core/component.html

コンポーネント内に JS をカプセル化できます。

AFRAME.registerComponent('color-on-click', function () {
  schema: {
    color: {default: 'blue'}
  },

  init: function () {
    var el = this.el;  // Reference to the entity.
    var data = this.data;  // Data passed in through HTML, defined in schema.

    el.addEventListener('click', function () {
      el.setAttribute('color', data.color);
    });
  }
});

そして、これらのコンポーネントを HTML のエンティティに添付します。入力を受け取ることができるHTML のオブジェクトに JS を宣言的にアタッチ/プラグインする方法に注意してください!:

<a-box color="red" color-on-click="color: blue"></a-box>
<a-sphere color="orange" color-on-click="color: white"></a-sphere>

そして、これらのコンポーネントは単純な JS を超えてあらゆることを行うことができます。three.js API全体にアクセスできるため、 three.js 内のすべてのものを簡単にラップできます。実際、必要な世界の JS ライブラリをコンポーネントでラップし、宣言的に使用します。

コンポーネントの操作

コンポーネントのプロパティの操作は、HTML 属性の操作に似ています。<a-box>ジオメトリとマテリアル コンポーネントで構成されます。そのため、内部は次のようになります。

<a-entity id="box" geometry="primitive: box" material="color: red" scale="2 2 2"></a-entity>

個々のプロパティを操作できます。

var boxEl = document.querySelector('#box');
boxEl.setAttribute('geometry', 'width', 5);
boxEl.getAttribute('material').color;
boxEl.removeAttribute('scale');

統合

API を HTML で公開することにより、A-Frame は、d3、React、Angular、テンプレート エンジンなどの既存の Web フレームワークやライブラリとうまく連携します。

于 2016-08-10T17:51:50.400 に答える