04-Cameras

Babylon.js Cameras

在所有的babylon场景中，您可以创建任意数量的cameras，但是，在同一时刻只能有一个camera是被激活的（除非您在使用multi-viewports）。

Camera的管理在babylon.js中非常简单：首先，您得创建一个camera，然后将它绑定到canvas的mouse、touch输入（参见Wrapping Up章节）。

Babylon.js支持许多类型的cameras。我们从两种常用的讲起-FreeCamera和ArcRotateCamera。

FreeCamera-这是一个FPS（第一人称射击游戏）类型的camera。像大多数别的cameras一样，您可以为他们添加控制键，或者为他们指定新的快捷键，如'w','a','s'和'd'。

FreeCamera没有自动对准目标，但是当创建完一个FreeCamera后，您可以很容易地通过lockedtarget属性将它锁定在一个mesh或者一个vector3的坐标位置。

下面是FreeCamera的构造方法：

// FreeCamera >> You can move around the scene with mouse and cursor keys
// Parameters : name, position, scene
    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);

上面的FreeCamera构造时通过给出的坐标对准了z轴方向，将它放置到了一个有用的起始位置。FreeCamera有许多属性来调整您的视图。常用的有position，rotation，speed，inertia(惯性)和fov(暂时不知为何物)。FreeCamera也和许多其他cameras一样具有基础cameras的用法，所以您会觉得它像一个老朋友一样。请查看FreeCamera API来获取更多信息。

ArcRotateCamera-这是一种围在指定目标旋转的camera。它可以通过cursors、mouse、touch事件来控制。它需要引入第三方控件“hand.js”。这个文件包含了我们很多的示例，您可以点击这里来下载。

下面是ArcRotateCamera的构造方法：

// ArcRotateCamera >> Camera turning around a 3D point (here Vector zero) with mouse and cursor keys
// Parameters : name, alpha, beta, radius, target, scene
   var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

ArcRotateCamera跟别的camera有一点不同，但是您以后会经常使用它。ArcRotateCamera有三个唯一属性：alpha(单位弧度)，beta(单位弧度)，radius（数字）。您可以将ArcRotateCamera当成地球的卫星，alpha是横向轴，beta是纵向轴，radius是地球核心的高度。图示如下：

ArcRotateCamera有许多属性来改变您的视图，常用的有alpha，beta，radius，target，speed，inertia，fov。

在默认情况下（没有指定alpha和beta值），ArcRotateCameras对准x方向。有趣的是，ArcRotateCamera没有rotation属性，但是又position属性。因为ArcRotateCamera是相对于他的目标设定的，我们通常使用setPosition()方法来设置camera的坐标位置。

在下面的例子中，ArcRotateCamera的target坐标为0，alpha、beta、radius也初始化为0。（警告：一个清零位置的ArcRotateCamera将会比较奇怪，直到setPostion()方法被调用）。接下来，我们传递一个Vector3 position值给setPosition()方法。alpha，beta，radius值将会自动被设置。

   // Create an ArcRotateCamera aimed at 0,0,0, with no alpha, beta or radius, so be careful. It will look broken.
   var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
   // Quick, let's use the setPosition() method... with a common Vector3 position, to make our camera better aimed.
   camera.setPosition(new BABYLON.Vector3(0, 15, -30));

在使用setPosition()方法时，我们无需关心alpha，beta和radius。我们只需确保有一个target被设置，然后使用setPosition方法将camera放置到我们所希望的3D空间位置。setPostion()方法非常方便。

ArcRotateCamera是一个优秀的动画camera。默认情况下，ArcRotateCamera没有upperAlphaLimit和lowerAlphaLimit。当您将arcCamera设置为scene.activeCamera，您可以将ArcRotateCamera围绕您的target旋转。将下面一句JavaScript代码放置到场景循环渲染的部分。

   scene.activeCamera.alpha += .01;

这就是Babylon.js，非常简单，非常棒。请查看ArcRotateCamera API来获取更多信息。

您还可以平移ArcRotateCamera。默认情况下，使用CTRL+鼠标左键，您也可以通过调用attachControl方法，设置useCtrlForPanning=false来指定使用鼠标右键：

   camera.attachControl(canvas, noPreventDefault, useCtrlForPanning);

（关于该方法的更多信息可以在Wrapping Up章节找到）

如果需要，您也可以完全关闭平移：

   scene.activeCamera.panningSensibility = 0;

Unique Purpose Cameras

Babylon.js有许多cameras是有唯一目的的。下面将介绍这些camera和他们的构造方法。

下面两个cameras，touch和gamepad，可以取代我们通用camera。touch和gamepad cameras的文档包含在这。

TouchCamera-TouchCamera和hand.js工作紧密，支持现代技术的DOM手势事件。Touch是一种“手势”，是指在平板或屏幕上，用手指，笔，手套，脚或者激光笔。他们所有的移动都可以感觉到运动，被认为是一个手势。您可以通过wikipedia来了解所有的手势信息。

TouchCamera支持所有现代手势输入。其大部分特性来至于hand.js。如果您想了解更多关于hand.js和它的手势方法，可以浏览David Catuhe的博客。

像Babylon.js的其他特性一样，TouchCamera有许多魔力特性，非常好用。下面是TouchCamera的构造方法：

// TouchCamera >> Move in your world with your touch-gesture device
// Parameters : name, position, scene
    var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

TouchCamera是以FreeCamera为基础，所以FreeCamera那些强大的属性和方法都可以在TouchCamera中找到。关于TouchCamera的所有属性和方法都可以在我们的API文档网站中找到。

GamepadCamera-David开发了很酷的VirtualJoysticksCamera，GamepadCamera也是他开发的，谢谢David。正如您所猜测的一样，GamepadCamera是与GamePad和Xbox360Pad这些工具一起工作的。这些将很快讲到。

好了，现在让我们来创建一个GamepadCamera：

// GamepadCamera >> Move in your scene with gamepad controls
// Parameters : name, position, scene
var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

同样，在GamepadCamera中我们可以找到FreeCamera中的很多有用的属性和方法。注意angularSensibility和moveSensibility属性，同DeviceOrientationCamera一样。关于GamepadCamera的所有属性和方法都可以在我们的API文档网站中找到。

DeviceOrientationCamera-DeviceOrientationCamera是专门为面向设备事件设计的camera。当您将您的设备向前或向后，向左或向右移动时，来控制camera或者scene。同样，David Catuhe博客上介绍了相关信息。

同样，我们来展示如何构造一个DeviceOrientationCamera：

// DeviceOrientationCamera >> Move in your scene with device orientation
// Parameters : name, position, scene
    var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

DeviceOrientationCamera同样也是以FreeCamera为基础，所以FreeCamera中的强大属性和方法都可以找到。有两个非常重要的属性angularSensibility和moveSensibility，需要我们进一步研究。DeviceOrientationCamera的所有属性和方法可以在我们的API文档网站中找到。

FollowCamera-论坛用户AlexB贡献了该FollowCamera。这个camera是特别为那些需要跟随的场景设计的。它可以从后面，前面，或者任何角度跟随目标。它跟随的距离以及移动速度都可以设置。

下面是构造方法，可以从AlexB的网站中查看到更多信息：

// FollowCamera >> Follow a mesh through your scene
// Parameters : name, position, scene
    var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);
    camera.lockedTarget = myMeshObject; // target any mesh or object with a "position" Vector3

上面的代码创建了一个FollowCamera，并且添加了一个mesh目标，这些是必须的。但是FollowCamera还有很多有用的属性，下面是我们举的一些例子：

camera.radius = 30; // how far from the object to follow
camera.heightOffset = 8; // how high above the object to place the camera
camera.rotationOffset = 180; // the viewing angle
camera.cameraAcceleration = 0.05 // how fast to move
camera.maxCameraSpeed = 20 // speed limit

最后，不要忘记下面的代码：

scene.activeCamera = camera;

上面就是所有内容，发掘所有关于FollowCamera的信息，请浏览我们API文档网站。

VirtualJoysticksCamera-VirtualJoysticksCamera是为虚拟摇杆事件设计的camera。虚拟摇杆用来2D图形中控制camera或者scene。David Rousset开发了VirtualJoysticksCamera，您可以在David's的博客中找到相关信息。

触摸触摸屏或者点击鼠标按钮的时候，虚拟操纵杆将被激活，不需要一点额外的操作。下面展示VirtualJoysticksCamera的构造函数：

// VirtualJoysticksCamera >> Move in your world with on-screen Virtual Joysticks
// Parameters : name, position, scene
    var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

VirtualJoysticksCamera同样是基于FreeCamera，所以FreeCamera的所有属性和方法它都有。

我们将准备一章章节来专门介绍VirtualJoysticksCamera。

您也可以通过我们API文档网站来了解VirtualJoysticksCamera的所有属性和方法。

AnaglyphCamera-AnaglyphCamera是使用3D红蓝眼镜的camera。是Babylon.js很新很棒的一个特性。它采用post-processing滤波技术。实际上有两种类型的AnaglyphCamera。

第一种是AnaglyphArcRotateCamera。它的构造方法：

// AnaglyphArcRotateCamera >> Analglyph 3D using filter-shifted ArcRotateCamera
// Parameters : name, alpha, beta, radius, target (in Vector3), eyeSpace (in degrees), scene
var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

第二种是AnaglyphFreeCamera。它的构造方法：

// AnaglyphFreeCamera >> Analglyph 3D using filter-shifted FreeCamera
// Parameters : name, position (in Vector3), eyeSpace (in degrees), scene
var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

eyeSpace参数为左眼和右眼之间的偏移量。当你戴着3D眼镜时，您可能需要调整这个值。

您可以在Wikipedia中了解到anaglyphs中的相关信息。

VRDeviceOrientationFreeCamera-VRDeviceOrientationFreeCamera是新加入的，下面是它的构造方法：

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

点击查看playground demo。

下面我们还有一些高级技巧来介绍，使camera初始化到一定角度。还有引入cameras组合。

VRDeviceOrientationFreeCamera同样是基于FreeCamera，所以FreeCamera的所有属性和方法它都有。

WebVRFreeCamera-WebVRFreeCamera相比VRDeviceOrientationFreeCamera更加新：

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

WebVRFreeCamera同样是基于FreeCamera，所以FreeCamera的所有属性和方法它都有。

Universal Camera-Babylon.js 2.3版本出现，像它的名字一样，提供了一种处理输入的通用方法。它是FreeCamera、TouchCamera和GamepadCamera的组合。

Universal Camera是Babylon.js的默认camera。如果没有特殊设置，您的最佳选择是采用FPS一样的场景控制。这样，您可以在桌面电脑上使用键盘鼠标控制camera，在移动设备上使用手指，在Xbox上使用gamepad。它可以同时为您处理这三种输入。同样，你可以在支持触摸的pc上同时使用这三种输入。对于babylon.js的所有演示都是基于特征的。为您的电脑插上一个Xbox，您就可以浏览我们的大部分演示示例。

Inputs

只要您调用camera的attachControl方法，camera将自动为您处理inputs输入。您可以通过调用detachControl方法来注销。在Babylon.js中，一般使用两步来激活和绑定一个camera：

   // First, set the scene's activeCamera... to be YOUR camera.
   scene.activeCamera = myCamera;
   // Then attach the activeCamera to the canvas.
   scene.activeCamera.attachControl(canvas, noPreventDefault);

也可以：

myCamera.attachControl(canvas);

noPreventDefault默认被设置为false，即preventDefault()方法将在canvas的鼠标点击，触摸事件触发后被自动调用。

Customizing inputs

FreeCamera和ArcRotateCamera依靠用户的输入来移动camera。如果您想事先设置camera，像GamepadCamera，将需要用到它。

如果您想根据用户的喜好来更改用户输入，定制现有设置，或者使用自己的输入机制。这里由于一个cameras管理器来设计那些高级方案。查阅customizing camera inputs来了解更多信息。

现在您已经学会了这些cameras的使用，以及我们常用的两个camera的一些高级的输入选项。您现在可以控制如何看到您的场景，如何选择您的输入设备和查看设备，知道如何移动camera。为了营造一个更真实的场景，我们接下来将学习如何控制lights。

Babylon.js Cameras

Unique Purpose Cameras

Inputs

Customizing inputs

下一节

发表评论