babylon.jsにはよく使われる２つのカメラがあります。
一つは１人称視点のユニバーサルカメラ(the Universal Camera)、
もう一つはアークカメラ(Arc Rotate Camera)です。
まずカメラのコントロールを可能にしましょう
camera.attachControl(canvas, true);
ユニバーサルカメラ Universal Camera
ユニバーサルカメラはキーボード、タッチ、ゲームパッドに対応したカメラです。
これはFreeCamera,Touch Camera, Gamepad Cameraの上位互換です。
ユニバーサルカメラを使うとFPSっぽい一人称視点を得られます。
それぞれの入力方法のデフォルト設定は次の通り
- キーボード・・・上下左右キー
- マウス・・・視点を回転
- タッチ操作・・・上下左右にスワイプ
コード
// 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);
アーク回転カメラ(Arc Rotate Camera)
このカメラは常に所定のターゲット位置を指し、ターゲットを回転の中心としてそのターゲットを中心に回転できます
カーソルとマウス、またはタッチイベントで制御できます。
このカメラは、その目標位置を周回するカメラ、またはより想像力で地球を周回するスパイ衛星と考えてください。ターゲット（地球）に対するその位置は、アルファ（ラジアン）縦回転、ベータ（ラジアン）緯度回転、および ターゲット位置からの距離の半径の3つのパラメーターで設定できます。
コード
// 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);
フォローカメラ(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);