シーン | A-FRAME

シーンは<a-scene>要素で表現される。シーンはグローバルルートオブジェクトであり、すべてのエンティティはシーン内に含まれます。

The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

シーンは Entity クラスを継承しているため、そのプロパティ、メソッド、コンポーネントをアタッチする機能、およびすべての子ノード ( となど) がロードされるまで待ってからレンダーループをキックする動作をすべて引き継ぎます。

<a-scene> は three.js と WebVR/WebXR のボイラープレートをすべて処理します。

キャンバス、レンダラー、レンダリングループのセットアップ
デフォルトのカメラとライト
webvr-polyfill、VREffectのセットアップ
エンターVRにWebVR APIを呼び出すUIを追加する
webxrシステムによるWebXR`デバイスの設定

# Example

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box src="#texture"></a-box>
</a-scene>

# プロパティ

Name	概要
behaviors	フレーム毎に実行される tick メソッドを持つコンポーネントの配列
camera	three.js カメラをアクティブにする
canvas	キャンバス要素を参照する
isMobile	環境のモバイル化を検知しているか
object3D	`THREE.Scene` (opens new window) オブジェクト
renderer	`THREE.WebGLRenderer`をアクティブにする
renderStarted	シーンがレンダリングされているか
effect	アクティブなレンダラーを`THREE.VREffect`に渡すことで作成される VR 用レンダラー
systems	インスタンス化されたsystems.
time	シーンのグローバルアップタイム（秒）

# ステート

Name	概要
vr-mode	VRに入るときと出るときにそれぞれ追加、削除します。`sceneEl.is('vr-mode')`で確認します。

# メソッド

Name	概要
enterVR	ステレオレンダリングに切り替え、コンテンツをヘッドセットにプッシュする。ページが初めて VR に入るときに、`click` などのユーザー生成イベントハンドラ内で呼び出される必要があります。
exitVR	モノラルレンダラーに切り替えて、ヘッドセットでのコンテンツ提示を停止する。

# イベント

Name	概要
enter-vr	ユーザーがVRに入り、ヘッドセットがコンテンツの提示を開始した。
exit-vr	ユーザーが VR を終了し、ヘッドセットがコンテンツの提示を停止した。
loaded	すべてのノードがロードされました。
renderstart	レンダー・ループが開始されました。

# シーンコンポーネント

コンポーネントは、エンティティだけでなく、シーンにも添付することができます。

<a-scene fog stats>

A-Frameには、シーンを構成するためのいくつかの部品が同梱されています。

embedded - キャンバスからフルスクリーンスタイルを削除します。
fog - フォグを追加する。
keyboard-shortcuts - キーボードショートカットをトグルする。
inspector - A-Frameインスペクタを挿入します。
stats - パフォーマンスの統計情報をトグルします。
vr-mode-ui - VRに入るときと出るときのUIをトグルします。

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

推奨される方法は、コンポーネントを書き、それをscene要素にアタッチすることです。シーンとその子要素は、このコンポーネントより先に初期化されます。

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');
}

← システム Mixins →