easy-three

fpv

一人称のカメラ操作を行うためのコントロールを提供します。

初期状態では無効化されています。
connect() を呼び出すことで有効化されます。

fpv.connect()

connect の引数で、各種の設定を行うことができます。

  • mouse : マウス操作で視点移動を行うかどうか (デフォルト: true)
  • mouseDownMove : マウス押し込みで前進するか (デフォルト: false)
  • arrow : 矢印キーで移動を行うかどうか (デフォルト: true)
  • wasd : WASDキーで移動を行うかどうか (デフォルト: true)
  • touch : タッチ操作で視点移動を行うかどうか (デフォルト: true)
  • height : カメラの高さ (デフォルト: 1.6)
  • speed : 移動速度 (デフォルト: 5)
  • viewSpeed : 視点移動速度 (デフォルト: 0.4)
  • position : カメラの初期位置 (デフォルト: [0, 0])

つまり、connect() を引数なしで実行することは、以下を実行することと同じです。

fpv.connect({
  mouse: true,
  mouseDownMove: false,
  arrow: true,
  wasd: true,
  touch: true,
  height: 1.6,
  speed: 5,
  viewSpeed: 0.4,
  position: [0, 0],
})

カメラの位置を x, z 座標のみで指定することに注意してください。y 座標は height の値が使用されます。

無効化する場合は、disconnect() を呼び出します。

fpv.disconnect()

その性質から、fpv は controls と併用することはできません。

操作方法

マウス

  • ボタン押し込み : 前進 (mouseDownMove: true の場合)
  • ドラッグ : 視点移動

キー操作中は、マウスボタンを押し込まなくてもマウスの動きに応じて視点移動が行われます。

キー

  • ArrowUp : 前進
  • ArrowDown : 後退
  • ArrowLeft : 左移動
  • ArrowRight : 右移動
  • W : 前進
  • S : 後退
  • A : 左移動
  • D : 右移動

タッチ

  • タッチ : 視点移動 & 前進

コードの例

視点移動

マウス操作で視点移動ができます。

const { camera, create, animate, fpv } = init();

fpv.connect()
create.ambientLight();
create.directionalLight();

create.cube({
  position: [0, 0.5, 10],
});

create.plane({
  size: 30,
  rotation: [-Math.PI / 2, 0, 0],
  option: {
    color: 0xffffff,
  }
})

animate();