BabylonJs系列-3.Camera相机

一_个前端
523 阅读4分钟

BabylonJs系列-3.Camera相机

简介

这节讲述的是相机，其实了解了上一节的几个基本概念，后面这几节并没有那么重要。只是让大家了解一下每一个概念的几种基本类型可以让大家有更多的选择实现效果。
这篇文章只讲述基本用法，主要是给大家看看效果，如果需要更复杂的API的话后续文章有更新会附加地址(todo)，也可以去官网看API 下面介绍介绍一下几种常用的相机：

  • 通用相机(UniversalCamera):可以通过鼠标，键盘等外设控制视角
  • 弧度旋转相机(ArcRotateCamera):这个相机总是指向一个给定的目标位置，并且可以围绕目标旋转，目标是旋转的中心。它可以用鼠标来控制，也可以用触摸事件来控制。
  • 跟随相机(FollowCamera):跟随它的目标进行移动

1. 通用相机（UniversalCamera）

通用相机是可以通过鼠标，键盘等外设设备控制视角的相机。日常经常使用到的用途就是第一人称视角，比如大家熟知的CF等游戏就可以通过通用相机来实现，下面让我们来看看他的API和使用方式:

API

UniversalCamera(name: string, position: Vector3, scene: Scene): UniversalCamera

  • name：相机名称
  • position：相机的初始位置
  • scene：相机被放到哪个场景中
  • return：返回一个UniversalCamera相机变量 这三个配置其实是通用配置了，知道一个其实很多类的参数放置都是相同的用法。
用法

setTarget是相机的一个通用方法，通俗理解就是摄像头看向的地方。我们带入现实世界中的摄像头，需要设置摄像头镜头位置，这个方法就是设置这个位置
attachControl也是相机的一个通用方法，代表让相机控制画布。即可以让相机根据自身特点“动起来”，像是通用相机设置之后就可以通过鼠标，方向键来控制相机移动

var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero())
camera.attachControl(canvas, false);// 让摄像头控制画布，实现摄像头移动效果

现在我们设置好了通用相机，可以试着用鼠标，方向键控制相机移动

2.弧度旋转相机（ArcRotateCamera）

这个相机简单来讲就是设置一个位置，这个相机会一直盯着这个位置。如果用鼠标移动的话，相机位置也是绕着这个位置移动。类似于卫星绕着地球旋转，可以将这个位置的内容全方面的展示出来。

API

ArcRotateCamera(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean): ArcRotateCamera

  • name: 相机的名字
  • alpha: 相机的纵向旋转弧度
  • beta: 相机的横向旋转弧度
  • radius: 定义相机到目标观察点的距离
  • target: 定义相机的目标观察点
  • scene: 相机要加入的场景
用法
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);

3. 关注相机(FollowCamera)

关注相机会跟随它的目标进行移动，类似于运动相机，过山车拍摄的感觉，它需要一个mesh作为目标（想象一下，你在前面走，后面有个人拿着摄像机在拍你）

API

FollowCamera(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable): FollowCamera

  • 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及之后的版本的写法

其他相机

如果业务需要需要用到其他相机效果的话，官网也提供了例子：BabylonJs相机

avatar
文章
阅读
粉丝