はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

babylon.js ステップ6 カメラ

babylon.jsにはよく使われる2つのカメラがあります。

一つは1人称視点のユニバーサルカメラ(the Universal Camera)、

もう一つはアークカメラ(Arc Rotate Camera)です。


まずカメラのコントロールを可能にしましょう

camera.attachControl(canvas, true);

ユニバーサルカメラ Universal Camera

ユニバーサルカメラはキーボード、タッチ、ゲームパッドに対応したカメラです。

これはFreeCamera,Touch Camera, Gamepad Cameraの上位互換です。

ユニバーサルカメラを使うとFPSっぽい一人称視点を得られます。

それぞれの入力方法のデフォルト設定は次の通り

  1. キーボード・・・上下左右キー
  1. マウス・・・視点を回転
  1. タッチ操作・・・上下左右にスワイプ
  1. ゲームパッド・・・デバイス次第

コード

// Parameters : name, position, scene
    var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);

// Targets the camera to a particular position. In this case the scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

// Attach the camera to the canvas
    camera.attachControl(canvas, true);

操作例はこちら:
https://www.babylonjs-playground.com/#SRZRWV

アーク回転カメラ(Arc Rotate Camera)

このカメラは常に所定のターゲット位置を指し、ターゲットを回転の中心としてそのターゲットを中心に回転できます
カーソルとマウス、またはタッチイベントで制御できます。

このカメラは、その目標位置を周回するカメラ、またはより想像力で地球を周回するスパイ衛星と考えてください。ターゲット(地球)に対するその位置は、アルファ(ラジアン)縦回転、ベータ(ラジアン)緯度回転、および ターゲット位置からの距離の半径の3つのパラメーターで設定できます。

f:id:hollywis:20200620014150j:plain

コード

// Parameters: alpha, beta, radius, target position, scene
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

// Positions the camera overwriting alpha, beta, radius
    camera.setPosition(new BABYLON.Vector3(0, 0, 20));

// This attaches the camera to the canvas
    camera.attachControl(canvas, true);

操作例:
https://www.babylonjs-playground.com/#SRZRWV#1

フォローカメラ(FollowCamera)

実際に触ってもらった方が早いため例を見てください。

ターゲットとなるメッシュを追随するように設定出来ます

操作例:
https://www.babylonjs-playground.com/#SRZRWV#6

コード

// Parameters: name, position, scene
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

// The goal distance of camera from target
camera.radius = 30;

// The goal height of camera above local origin (centre) of target
camera.heightOffset = 10;

// The goal rotation of camera around local origin (centre) of target in x y plane
camera.rotationOffset = 0;

// Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005

// The speed at which acceleration is halted
camera.maxCameraSpeed = 10

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// NOTE:: SET CAMERA TARGET AFTER THE TARGET'S CREATION AND NOTE CHANGE FROM BABYLONJS V 2.5
// targetMesh created here.
camera.target = targetMesh;   // version 2.4 and earlier
camera.lockedTarget = targetMesh; //version 2.5 onwards

その他のカメラ

バイス回転カメラ(Device Orientation Camera)
・・・デバイスの方向を取得して反映する

例はこちら
https://www.babylonjs-playground.com/#SRZRWV#3



バーチャルジョイスティックカメラ(Virtual Joysticks Camera)

画面上にジョイスティックを表示する

例はこちら
www.youtube.com




WebVR Free Camera

Use the WebVR Camera - Babylon.js Documentation


飛行カメラ(FlyCamera)

WSADキーで動きます

// Parameters: name, position, scene
var camera = new BABYLON.FlyCamera("FlyCamera", new BABYLON.Vector3(0, 5, -10), scene);

// Airplane like rotation, with faster roll correction and banked-turns.
// Default is 100. A higher number means slower correction.
camera.rollCorrect = 10;
// Default is false.
camera.bankedTurn = true;
// Defaults to 90° in radians in how far banking will roll the camera.
camera.bankedTurnLimit = Math.PI / 2;
// How much of the Yawing (turning) will affect the Rolling (banked-turn.)
// Less than 1 will reduce the Rolling, and more than 1 will increase it.
camera.bankedTurnMultiplier = 1;

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

まとめ

様々なコントロール可能なカメラがbabylon.jsにはあり

ユニバーサルカメラとアーク回転カメラが2大カメラです。

さらに、拡張としてバーチャルジョイスティックを画面上に表示させるなど、十分な操作方法が提供されています

次回はライトの設定です