×
文章路径: 翻译 > babylonjs

04-Cameras

发表于1年前(Apr 14, 2017 5:50:00 PM)  阅读 1086  评论 0

分类: 翻译 babylonjs

标签: babylonjs 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中的强大属性和方法都可以找到。有两个非常重要的属性angularSensibilitymoveSensibility,需要我们进一步研究。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

发表评论