camera | A-FRAME

カメラコンポーネントは、ユーザーがどの視点からシーンを見るかを定義します。カメラは一般的にコントロールコンポーネントと対になっており、入力デバイスがカメラを動かしたり回転させたりできるようになっています。

# 例

カメラは通常、人間の目の高さの平均値（1.6m）に配置する必要があります。回転や位置を受け取るコントロール（VRデバイスなど）と一緒に使用すると、この位置情報が上書きされます。

<a-entity camera look-controls position="0 1.6 0"></a-entity>

シーンに対してカメラを移動または回転させる場合、カメラリグを使用します。これによって、カメラの高さオフセットをルームスケールデバイスで更新しながら、トラッキングされたエリアをシーン上で独立して移動させることができます。

<a-entity id="rig" position="25 10 0">
  <a-entity id="camera" camera look-controls></a-entity>
</a-entity>

# Properties

Property	概要	デフォルト値
active	複数のカメラが存在するシーンで、このカメラがアクティブカメラであるかどうか。	true
far	カメラの軌跡の遠方をクリッピングした面。	10000
fov	視野角（単位：度）。.	80
near	カメラの軌跡の近い位置をクリッピングした面。	0.005
spectator	VRモード時に、カメラを使用してシーンの三人称視点を2Dディスプレイにレンダリングするかどうか。	false
zoom	カメラのズームファクター。	1

# デフォルトカメラ

カメラが指定されていない場合、A-Frameはデフォルトのカメラを配置します。

<a-entity camera="active: true" look-controls wasd-controls position="0 1.6 0" data-aframe-default-camera></a-entity>

カメラが指定されている場合（例：独自の<a-camera>や<a-entity camera>）、デフォルトのカメラは追加されません。

# VR ビヘイビア

VRを終了する際、カメラは回転をVRに入る前の回転に戻します。これは、VRを終了するときに、カメラの回転がデスクトップ画面の通常の回転に戻るためです。

Far、near、fov、zoomのプロパティは、2Dとマジックウィンドウモードにのみ適用されます。VR モードでは、IPD とヘッドセットの FOV に合わせて、WebVR / WebXR API からカメラパラメータが提供されます。これらは設定可能ではありません。

# アクティブなカメラを切り替える

activeプロパティがトグルされると、コンポーネントはカメラシステムに通知して、レンダラーで使用される現在のカメラを変更します。

var secondCameraEl = document.querySelector('#second-camera');
secondCameraEl.setAttribute('camera', 'active', true);

# カメラのエンティティを修正する

ユーザーがどこを向いても視界に入るようにエンティティをカメラに固定するには、そのエンティティをカメラの子としてアタッチすることができます。使用例としては、ヘッドアップディスプレイ（HUD）などがあります。

<a-entity camera look-controls>
  <a-entity geometry="primitive: plane; height: 0.2; width: 0.2" position="0 0 -1"
            material="color: gray; opacity: 0.5"></a-entity>
</a-entity>

なお、HUDは刺激や眼精疲労の原因となるため、控えめに使用する必要があります。 VRではメニューを世界そのものに統合することを検討してください。もしHUDを作成する場合は、HUDを視野の中心に配置するようにしてください。読むために目を酷使する必要がないようにします。

# カメラの回転と位置を読む

カメラの位置や回転を積極的に読み取るには、位置や回転を読み取るコンポーネントのティックハンドラーを使い、それを使って何かを行います。そして、そのコンポーネントをカメラに取り付けます。

AFRAME.registerComponent('rotation-reader', {
  tick: function () {
    // `this.el` is the element.
    // `object3D` is the three.js object.

    // `rotation` is a three.js Euler using radians. `quaternion` also available.
    console.log(this.el.object3D.rotation);

    // `position` is a three.js Vector3.
    console.log(this.el.object3D.position);
  }
});

// <a-entity camera look-controls rotation-reader>

# ワールド空間の位置とカメラの回転を読む

three.jsは、ワールド空間とオブジェクトのローカル空間における位置や回転（またはスケール）を取得するメソッドを備えています。

AFRAME.registerComponent('rotation-reader', {
  /**
   * We use IIFE (immediately-invoked function expression) to only allocate one
   * vector or euler and not re-create on every tick to save memory.
   */
  tick: (function () {
    var position = new THREE.Vector3();
    var quaternion = new THREE.Quaternion();

    return function () {
      this.el.object3D.getWorldPosition(position);
      this.el.object3D.getWorldQuaternion(quaternion);
      // position and rotation now contain vector and quaternion in world space.
    };
  })()
});

← background cursor →