aframe
シーン

前書き

パラメーター

備考

シーンコンポーネントの添付

コンポーネントはエンティティだけでなくシーンにも取り付けることができます。 A-Frameには、シーンを構成するためのコンポーネントがいくつか付属しています。

埋め込みシーンの使用

たとえば、拡張ショーケースの主要コンテンツを作成しているときなど、HTMLコンテンツと混在したWebVRコンテンツを使用するには、 embeddedタグを使用できます。これを使用しているときは、スマートフォンのジャイロスコープを使用して360°のコンテンツを見回したり、コンピュータをクリックしてドラッグしたりすることができます。

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<div class="vrcontent">
  <a-scene embedded>
    <a-assets>
      <img id="sky" src="https://c1.staticflickr.com/5/4248/34705881091_37b5cf2d28_o.jpg" alt="" />
    </a-assets>

    <a-sky src="#sky"></a-sky>
  </a-scene>
</div>

<div class="overlay">
  <button class="calltoaction">Click me!</button>
</div>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti animi aliquid architecto quibusdam ipsum, debitis dolor mollitia. Quidem, cumque quos porro doloribus iure dolore illum, qui rem asperiores unde laboriosam.Dolorum tempora quam eveniet ea recusandae deserunt, velit similique. Cum sunt rerum beatae officiis qui sed molestiae et ullam quasi, harum maxime vel, aspernatur quidem molestias. Provident quae illo harum?Sunt expedita, repellat saepe vel accusamus odio. Alias, obcaecati harum earum inventore asperiores quaerat, sit autem nostrum. Sunt illo numquam, temporibus pariatur optio nam, expedita necessitatibus aliquid nemo maxime nisi. Praesentium corporis, ea sunt asperiores, recusandae animi, rem doloribus, possimus cum laudantium libero. Maiores a, iusto aspernatur reiciendis ratione sunt nisi, rem, quasi temporibus ullam non. Neque repellat facilis illo.Quibusdam reiciendis sunt tempora fuga deleniti, molestias temporibus doloremque. Nam sed consequatur consectetur ut tempora a nesciunt, perspiciatis dolorem reprehenderit modi enim at veritatis, excepturi voluptate quod, voluptatibus voluptas. Cum.Debitis, nesciunt, repellat voluptatem sapiente incidunt quidem asperiores reprehenderit vero quisquam placeat sunt voluptatibus velit. Consectetur atque voluptates, repellendus facere sequi ea totam quia quis non incidunt. Soluta, aut, provident. Eos sequi itaque dolorem atque ex id maiores dolor eaque libero iste deserunt ea voluptate minima cum laboriosam, qui animi, fuga suscipit necessitatibus vero, autem blanditiis, totam nulla. Quo, et. Quisquam commodi voluptatum dolorem aspernatur, distinctio et ullam laborum laboriosam quo nisi, praesentium quaerat ab excepturi. Illum harum doloremque, accusantium, beatae culpa assumenda laboriosam, quos mollitia aperiam dolorem praesentium minus!</p>
</div>

デバッグ

デバッグコンポーネントは、コンポーネントからDOMへのシリアル化を可能にします。

<a-scene debug></a-scene>

コンポーネントとDOMのシリアライゼーション

デフォルトでは、パフォーマンス上の理由から、A-FrameはDOMをコンポーネントデータで更新しません。ブラウザのDOMインスペクタを開くと、コンポーネント名（値ではなく）のみが表示されます。

<a-entity geometry material position rotation></a-entity>

A-Frameは、コンポーネントデータをメモリに保存します。 DOMを更新すると、内部コンポーネントデータを文字列に変換するCPU時間がかかります。デバッグの目的でDOMアップデートを見たい場合は、デバッグコンポーネントをシーンにアタッチすることができます。コンポーネントは、DOMにシリアル化しようとする前に、有効なデバッグコンポーネントをチェックします。次に、DOM内のコンポーネントデータを表示できます。

<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

このコンポーネントが本番環境でアクティブでないことを確認してください。

手動でDOMにシリアライズする

DOMに手動でシリアル化するには、Entity.flushToDOMまたはComponent.flushToDOMを使用します。

document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
document.querySelector('a-entity').flushToDOM();  // Flush an entity.
document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.

シーンでのコンテンツスクリプトの実行

推奨される方法は、コンポーネントを記述し、それをシーン要素に添付することです。
シーンとその子は、このコンポーネントの前に初期化されます。

AFRAME.registerComponent('do-something', {
  init: function () {
    var sceneEl = this.el;
  }
});

<a-scene do-something></a-scene>

何らかの理由で専用コンポーネントを作成したくない場合は、シーンの初期化とアタッチが完了するまで待つ必要があります。

var scene = document.querySelector('a-scene');

if (scene.hasLoaded) {
  run();
} else {
  scene.addEventListener('loaded', run);
}

function run () {
  var entity = scene.querySelector('a-entity');
  entity.setAttribute('material', 'color', 'red');
}