【babylonjs】babylonjs实践（二）–相机

理论

camera

UniversalCamera

这里介绍的Babylon.js中的通用相机，可以通过使用键盘、鼠标、触摸板、游戏手柄输入控制。它延伸和替代了仍然可以使用的自由相机（Free Camera）、触摸相机（Touch Camera）和游戏手柄相机（Gamepad Camera）。

现在通用相机在没有特殊需求的情况下被BabylonJs用做默认相机。同时如果你想要在你的场景里使用 第一人称视角，它也是你最好的选择。

API

• 参数name：相机的名字
• 参数position：相机的初始位置
• 参数scene：相机被放到哪个场景中
• 返回：返回一个UniversalCamera相机变量

说明

• camera的第三个参数是sence，所以就给这个sence绑定camera了。position是相机的放置位置。通用相机的放置位置是固定的。
• 一般都会设定cameara的朝向，和添加camera的控制。

var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);

• 其中new BABYLON.Vector3(0, 0, -10)表示空间点，BABYLON.Vector3.Zero()是原点，等价于new BABYLON.Vector3(0, 0, 0)

ArcRotateCamera

弧度旋转相机这个相机名字听上去就很古怪，但是还算好，比较好理解。

这个相机总是指向一个给定的目标位置，并且可以围绕目标旋转，目标是旋转的中心。它可以用鼠标来控制，也可以用触摸事件来控制。

想象一下，这个相机其实就是一个间谍卫星绕地球旋转，可以将期各个方位的细节展示出来。其相对于目标的位置（地球）可以设置三个参数，α（弧度）的纵向旋转，β（弧度）横向旋转以及与目标的距离。

API

ArcRotateCamera的构造函数如下：

• name: 相机的名字
• alpha: 相机的纵向旋转弧度
• beta: 相机的横向旋转弧度
• radius: 定义相机到目标观察点的距离
• target: 定义相机的目标观察点
• scene: 相机要加入的场景

简单点说，ArcRotateCamera（name，环向角度，竖向角度，半径，target，scene），target一般是原点。

说明

• 一般会直接放置camera的position，来覆盖定义的时候alpha、beta、radius。

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 1, new BABYLON.Vector3(0, 0, 0), scene);
// 这是相机的位置，覆盖相机的alpha、beta、半径值
camera.setPosition(new BABYLON.Vector3(10, 10, -100));
// 将相机和画布关联
camera.attachControl(canvas, true);

FollowCamera

顾名思义， FollowCamera跟随相机会跟随它的目标进行移动。跟随相机需要一个网格作为目标，从它当前的位置移动到目标位置，从中观察目标。当目标移动时，跟随摄像机也会移动（想象一下，你在前面走，后面有个人拿着摄像机在拍你）。这个相机能做出很多特效来，如跟随飞机的战斗游戏，Babylon.js提供了很多相机，这也是比Three.js简单的原因之一。

api

• name: 相机的名字
• position: 相机的位置
• scene: 相机属于哪一个场景
• Optional lockedTarget: 可选参数，定义相机的跟踪的目标物体。

可以设置一些其他参数来保证效果。

说明

// Add and manipulate meshes in the scene
sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);

// 跟随相机
// 参数:名字，位置，所属场景    
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, -5, 0), scene);
// // 相机与目标的距离
// camera.radius = 10;
// // 相机超过目标局部坐标中心点的高度
// camera.heightOffset = 10;
// // 相机在目标局部坐标XY平面内环绕目标的旋转角度
// camera.rotationOffset = 0;
// // 加速度
// camera.cameraAcceleration = 0.005
// // 最大速度 
// camera.maxCameraSpeed = 10
// 将相机与画布关联
camera.attachControl(canvas, true);
// 注意:这里的babylon.js版本为2.5，后续版本的写法可能会有改变
// 创建目标网格
// camera.target = sphere; // 2.4及之前的版本的写法
 camera.lockedTarget = sphere; // 2.5及之后的版本的写法

其他相机

www.babylonjs.com.cn/babylon101/… 上面介绍的三个比较通用，比如我们业务场景中，只要通用和followCamera就可以了。满足业务需求了。