🎥

【Babylon.js】カメラの種類と使い方

2023/11/17に公開

Babylon.js

tech

この記事ではBabylon.jsのカメラ使い方と種類について解説します。

カメラについては、以下の公式ドキュメントでも解説されています。

使い方

Babylon.jsのカメラはfovやnear clip、far clipなどのカメラ自体のパラメータだけでなく、カメラの操作やVRなどの用途のための機能を含んだクラスとして定義されています。UniversalCameraを例にすると、以下のようにカメラを作成後、attachControlでDOMと紐付けることでマウスなどで操作できるようにします。

const canvas = document.getElementById('canvas')
const scene = new BABYLON.Scene(engine)
// カメラを作成する
const camera = new BABYLON.UniversalCamera('Camera', new BABYLON.Vector3(0, 0, -10), scene)
// canvas要素への入力をカメラ操作と紐付ける
camera.attachControl(canvas, true)

カメラの種類

前述したようにBabylon.jsのカメラは操作なども含んだクラスとして定義されているので、以下のように多数のカメラが存在しています。リストのインデントはクラスの継承関係を表しています。カメラのベースクラスであるCameraクラスをTargetCameraクラスが継承し、その他のすべてのカメラがTargetCameraクラスを継承しています。ArcRotateCameraやFlyCameraのように操作方法ごとにクラスが存在し、そのクラスをさらに継承してAnaglyph〇〇CameraやStreoscopic〇〇CameraといったVRなどの特殊な用途に向けたカメラが定義されています。。この記事では、このうちの使用頻度が高いであろうカメラ(リストの太字にしているカメラ)について解説します。

Camera
- TargetCamera

Camera

This is the base class of all the camera used in the application.
アプリケーションで使用するすべてのカメラのベースクラスです。

すべてのカメラのベースとなるクラスです。直接使用することはないと思いますが、継承したクラスで利用できるカメラ自体のパラメータはこのクラスで定義されています。

fov: カメラのField of View
fovMode: ビューポートの縦横どちらにfovを合わせるか
- FOVMODE_VERTICAL_FIXED: 0
- FOVMODE_HORIZONTAL_FIXED: 1
minZ: カメラが写す最小距離(near clip)
maxZ: カメラが写す最大距離(far clip)
mode: 射影投影か平行投影か
- PERSPECTIVE_CAMERA: 0
- ORTHOGRAPHIC_CAMERA: 1
orthoTop, orthoBottom,orthoLeft,orthoRight: 平行投影のときの上下左右の大きさ

// カメラの作成
const camera = ...
// カメラのfovを水平方向に60度, 撮影距離を1〜100に設定
camera.fovMode = BABYLON.Camera.FOVMODE_HORIZONTAL_FIXED
camera.fov = 60 * (Math.PI / 180)
camera.minZ = 1
camera.maxZ = 100

const canvas = document.getElementById('canvas')
// カメラの作成
const camera = ...
// 平行投影の設定
camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA
const cameraVerticalOrthoSize = 5
const cameraHorizontalOrthoSize = cameraVerticalOrthoSize * (canvas.width / canvas.height)
camera.orthoTop = cameraVerticalOrthoSize
camera.orthoBottom = -cameraVerticalOrthoSize
camera.orthoLeft = -cameraHorizontalOrthoSize
camera.orthoRight = cameraHorizontalOrthoSize

TargetCamera

A target camera takes a mesh or position as a target and continues to look at it while it moves.
This is the base of the follow, arc rotate cameras and Free camera
Target Cameraはメッシュまたは位置をターゲットとして受け取り、ターゲットの動きに合わせて置い続けます。
これはFollow Camera、Arc RoateCamera、Free Cameraのベースとなります。

TargetCameraはユーザー操作がない固定カメラとして使用できます。

lockedTarget: カメラの注視点

// コンストラクタの引数: name, positoin, scene 
const camera = new BABYLON.TargetCamera('TargetCamera', new BABYLON.Vector3(0, 15, -10), scene)
// カメラの注視点を設定する
camera.lockedTarget = BABYLON.Vector3.Zero()

lockedTargetにはメッシュも指定することができ、メッシュが動くとその動きに合わせて視点が変変わります。

TargetCameraのtargetプロパティでも注視点を設定できますが、こちらは指定できるのがVector3のみです。

const camera = new BABYLON.TargetCamera(...)
// カメラの注視点を設定する
camera.target = BABYLON.Vector3.Zero()
// setTargetで指定することも可能
camera.setTarget(BABYLON.Vector3.Zero())

UniversalCamera

The Universal Camera is the one to choose for first person shooter type games, and works with all the keyboard, mouse, touch and gamepads. This replaces the earlier Free Camera,
which still works and will still be found in many Playgrounds.
Universal CameraはFPS系のゲームのために選択するカメラで、すべてのキーボード、マウス、タッチ操作、ゲームパッドで機能します。このカメラはPlaygroundsでよく見かけるFree Cameraを代替します。

FPSゲームのような操作ができるカメラです。

speed: 移動速度
angularSensibility: マウス操作に対する回転の感度, 値が大きいほど感度が低くなる

// コンストラクタ引数: name, position, scene
const camera = new BABYLON.UniversalCamera('UniversalCamera', new BABYLON.Vector3(0, 1, -3), scene)
camera.speed = 0.1
camera.angularSensibility = 5000
camera.attachControl(canvas, true)

ArcRotateCamera

This camera always points towards a given target position and can be rotated around that target with the target as the centre of rotation. It can be controlled with cursors and mouse, or with touch events.
Think of this camera as one orbiting its target position, or more imaginatively as a spy satellite orbiting the earth. Its position relative to the target (earth) can be set by three parameters, alpha (radians) the longitudinal rotation, beta (radians) the latitudinal rotation and radius the distance from the target position.
このカメラは与えられたターゲットの位置を常に向き、ターゲットを中心として回転することができます。カーソルとマウス、またはタッチイベントで操作することができます。
このカメラはターゲットを周回するもの、より想像力を駆使すると地球を周る偵察衛星のようなものだと捉えることができます。カメラのターゲット(地球)に対する位置は3つのパラメータ、　縦方向の回転alpha(radian)、横方向の回転beta(radian)、ターゲットからの距離radiusにより設定されます。

ターゲットを注視点にして、その周囲を回転するような操作ができるカメラです。

alpha: 水平方向の回転
beta: 垂直方向の回転
radius: ターゲットからの距離
upperAlphaLimit: alphaの上限
lowerAlphaLimit: alphaの下限
upperBetaLimit: betaの上限
lowerBetaLimit: betaの下限
upperRadiusLimit: radiusの上限
lowerRadiusLimit: radiusの下限

// コンストラクタ引数: name, alpha, beta, radius, target, scene
const camera = new BABYLON.ArcRotateCamera('ArcRotateCamera', 0, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene)
camera.attachControl(canvas, true)

const camera = new BABYLON.ArcRotateCamera(...)
// alpha, beta, radiusを制限する
camera.lowerAlphaLimit = -Math.PI / 2
camera.upperAlphaLimit = Math.PI / 2
camera.lowerBetaLimit = Math.PI / 3
camera.upperBetaLimit = (Math.PI / 3) * 2
camera.lowerRadiusLimit = 5
camera.upperRadiusLimit = 15
camera.attachControl(canvas, true)

setPositionを使用すると、位置に合わせてalhpa, beta, radiusを計算して設定します。

// コンストラクタではalpha, beta, radiusを適当に設定
const camera = new BABYLON.ArcRotateCamera('ArcRotateCamera', 0, 0, 0, BABYLON.Vector3.Zero(), scene)
// 指定した位置にカメラを配置し、それに合わせてalpha, beta, radiusが修正される
camera.setPosition(new BABYLON.Vector3(5, 10, 15))
console.log(`alpha: ${camera.alpha}, beta: ${camera.beta}, radius: ${camera.radius}`)
// alpha: 1.2490457723982544, beta: 1.0068536854342678, radius: 18.708286933869708
camera.attachControl(canvas, true)

FlyCamera

This is a flying camera, designed for 3D movement and rotation in all directions,
such as in a 3D Space Shooter or a Flight Simulator.
3Dスペースシューターやフライトシミュレータのような三次元的な動きやすべての方向への回転のために設計された飛行カメラです。

空を飛んでいるような操作ができるカメラです。

const camera = new BABYLON.FlyCamera('FlyCamera', new BABYLON.Vector3(0, 2, -5), scene)
camera.speed = 0.1
camera.attachControl(canvas, true)

FollowCamera

A follow camera takes a mesh as a target and follows it as it moves. Both a free camera version followCamera and
an arc rotate version arcFollowCamera are available.
follow cameraはメッシュをターゲットとして、ターゲットの動きに合わせて追走します。free camera版のfollowCameraとarc rotate版のarcFollowCameraの両方が利用できます。

ターゲットを追跡するカメラです。

lockedTarget: 追跡対象のメッシュ
heightOffset:高さのoffset
rotationOffset: 回転のoffset
lowerHeightOffsetLimit: 高さのoffsetの下限
upperHeightOffsetLimit: 高さのoffsetの上限
lowerRotationOffsetLimit: 回転のoffsetの下限
upperRotationOffsetLimit: 回転のoffsetの上限

const camera = new BABYLON.FollowCamera('FollowCamera', new BABYLON.Vector3(0, 15, -10),scene)
// 追跡対象のメッシュを指定する
camera.lockedTarget = target
camera.attachControl(canvas, true)

const camera = new BABYLON.FollowCamera(...)
// 追跡対象のメッシュを指定する
camera.lockedTarget = target
// 高さと回転を制限する
camera.lowerHeightOffsetLimit = 3
camera.upperHeightOffsetLimit = 15
camera.lowerRotationOffsetLimit = -90
camera.upperRotationOffsetLimit = 90
camera.attachControl(canvas, true)

使い方