babylon101| 06. Cameras（相机）

在Babylon.js中最常用的相机是Universal Camera used for First Person Movement（第一人称运动通用摄像机） 和 the Arc Rotate Camera （圆弧旋转照相机），随后又出现了WebVR相机

所有的相机必须先与canvas进行绑定：

camera.attachControl(canvas, true);

• Universal Camera

如果没有指定，Universal Camera现在是Babylon.js使用的默认相机，构建方法如下：

// 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    弧形旋转相机

弧形旋转相机总是指向设定的目标位置，可以以目标为中心进行旋转。可以把这个相机想象成一个绕着目标位置旋转的相机，或者想象成一个绕着地球旋转的卫星。它相对于目标(地球)的位置可以通过三个参数来设置:

1. alpha 纬向旋转（弧度）
2. beta 经向旋转（弧度）
3. radius 距离目标位置的半径

如图所示：

ps：由于技术问题，beta值不能设置为0或者PI，一般用0.1rad近似表示0

alpha和beta值都是按顺时针方向增加的

摄像机的位置也可以通过一个矢量来设置，该矢量将覆盖aipha、beta和radius的任何当前值，这比计算所需的角度要容易得多。

弧形旋转相机的构建方法如下：

// Parameters: alpha, beta, radius, target position, scene 设置相机参数 alpha、beta、radius值，目标位置
    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  追随摄像机

以一个mesh作为目标，无论它当前在什么位置，它都将移动到一个目标位置来查看目标，当目标移动时，跟随摄像机也移动。相机移动到目标位置的速度通过它的加速度(camera.cameraAcceleration)加速到最大速度(camera.maxCameraSpeed)。

追随摄像机构造方法如下：

// 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

• AnaglyphCameras 立体相机

主要是在上述两种相机的基础上，使用红-蓝3D眼镜技术实现3D立体效果，借助的是一种叫做 post-processing filtering techniques的后处理滤波技术。

构造方法如下：

// Constructing Anaglyph Universal Camera
//Parameters : name, position, eyeSpace, scene
var camera = new BABYLON.AnaglyphUniversalCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

//Constructing Anaglyph ArcRotateCamera
// Parameters : name, alpha, beta, radius, target, eyeSpace, scene
var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

eyeSpace参数设置左眼视图和右眼视图之间的距离移动量

• Device Orientation Camera 设备朝向相机

这是一款专门设计的相机，用于对设备方向事件做出反应，比如移动设备（手机、pad等）向前或向后倾斜，向左或向右倾斜。

构造方法如下：

// Parameters : name, position, scene
   var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 0, 0), scene);

    // Targets the camera to a particular position
    camera.setTarget(new BABYLON.Vector3(0, 0, -10));

    // Sets the sensitivity of the camera to movement and rotation
    camera.angularSensibility = 10;
    camera.moveSensibility = 10;

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

• Virtual Joysticks Camera 虚拟操纵杆相机

这是专门为响应虚拟操纵杆事件而设计的，虚拟操纵杆是屏幕上的2D图形，用于控制摄像机或其他场景项目，实例如下：

• VR Device Orientation Cameras VR设备定位摄像头​​​​​机

针对VR设备的摄像机，构造方法如下：

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene);
var camera = new BABYLON.VRDeviceOrientationArcRotateCamera ("Camera", Math.PI/2, Math.PI/4, 25, new BABYLON.Vector3 (0, 0, 0), scene);
var camera = new BABYLON.VRDeviceOrientationGamepadCamera("Camera", new BABYLON.Vector3 (-10, 5, 14));

• WebVR Free Camera WebVR自由相机
  是一种新的虚拟现实摄像机，构造方法如下：

// Parameters : name, position, scene, webVROptions
    var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

更多的WebVR使用方法参见 Using the WebVR Camera

• FlyCamera 飞行摄像机

这款相机模仿三维空间中的自由运动，想象一下“太空中的幽灵”。它有一个选项逐渐正确的滚动，也有一个选项模仿倾斜转弯。

参考资料： https://doc.babylonjs.com/babylon101/cameras