04-Cameras
发表于5年前(Apr 14, 2017 5:50:00 PM)  阅读 6162  评论 0
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。