SuperMap iClient3D for WebGL教程 Camera相机(二)应用实战

WuYK

在Camera上一讲中,我们已经大概了解了Camera的一些基本参数,也用了一个简单的示例去应用了Camera,让我们能够通过键盘第一人称浏览场景,在这一文章中,我们将结合Camera和primitive进行第三人称控制小车移动。

以下是我的结果图:

要想实现这个效果, 主要是通过控制Camera的视角和模型与primitive的矩阵位置实现的以及trackedEntity实现,当然primitive可以替换为entity或者S3MInstanceCollection实现。话不多说,以下便是实现思路:

1.添加小车

//设置小车位置
let position = Cesium.Cartesian3.fromDegrees(116.372799945882,39.9862260443959,10);                
// 用于设置小车方向
let hpRoll = new Cesium.HeadingPitchRoll();
let fixedFrameTransforms = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
// 添加小车模型
let carPrimitive = scene.primitives.add(Cesium.Model.fromGltf({url: 'Cesium_Ground.gltf',modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84,fixedFrameTransforms),scale:5					}));		

2.添加trackedEntity,实现视角跟踪

var trackedEntity;
trackedEntity = viewer.entities.add({id: 'tracked-entity',position: position,point: {pixelSize: 1,show: true },viewFrom: new Cesium.Cartesian3(0,-200,400) // 观察位置的偏移量															});viewer.trackedEntity = trackedEntity;  

3.注册键盘事件,通过键盘修改相机视角与primitive位置矩阵

通过document.addEventListener(‘keydown’, function(e) { }, true) 与document.addEventListener(‘keyup’, function(e) { }, true) 注册键盘按下与抬起事件,通过相应按键去修改相机角度与小车的位置,将触发事件放在viewer.clock.onTick.addEventListener场景时间监听事件中(或者场景渲染事件scene.postRender),达到实时修改渲染效果

以下是所有代码

var viewer = new Cesium.Viewer('cbd', {selectionIndicator: false				});var scene = viewer.scene;var entity;var promise = scene.open('http://localhost:8090/iserver/services/3D-olpc/rest/realspace');				let radian = Cesium.Math.toRadians(1.5);// 小车的速度let speed = 1;// 速度矢量let speedVector = new Cesium.Cartesian3();var 	trackedEntity;// 起始位置let position = Cesium.Cartesian3.fromDegrees(116.372799945882,39.9862260443959,10);                // 用于设置小车方向let hpRoll = new Cesium.HeadingPitchRoll();let fixedFrameTransforms = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');// 添加小车模型let carPrimitive = scene.primitives.add(Cesium.Model.fromGltf({url: 'Cesium_Ground.gltf',modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84,fixedFrameTransforms),scale:5					}));				var Camera_actions;Cesium.when(promise,function(layers){				var camera = scene.camera;trackedEntity = viewer.entities.add({id: 'tracked-entity',position: position,point: {pixelSize: 1,show: true },viewFrom: new Cesium.Cartesian3(0,-200,400) // 观察位置的偏移量															});viewer.trackedEntity = trackedEntity; 
//相机行为            Camera_actions = {moveUp: false,moveDown: false,moveLeft: false,moveRight: false,movefast:false,piaoyi:false,moveslow:false};
//获取键盘响应function getAction(keyCode) {switch(keyCode) {case 'W'.charCodeAt(0):return 'moveUp';case 'S'.charCodeAt(0):return 'moveDown';case 'A'.charCodeAt(0):return 'moveLeft';case 'D'.charCodeAt(0):return 'moveRight';case 'J'.charCodeAt(0):return 'movefast';case 'L'.charCodeAt(0):return 'moveslow';case 'K'.charCodeAt(0):return 'piaoyi';default:return undefined;}}document.addEventListener('keydown', function(e) {var action = getAction(e.keyCode);if(typeof action !== 'undefined') {Camera_actions[action] = true;}}, true);document.addEventListener('keyup', function(e) {var action = getAction(e.keyCode);if(typeof action !== 'undefined') {Camera_actions[action] = false;}					}, true);
//场景时间渲染时间,类比于场景渲染事件					viewer.clock.onTick.addEventListener(function(clock) {				if(Camera_actions.movefast)//小车加速,响应J键盘按钮{if(Camera_actions.moveUp)						{speed=speed+0.02;moveCar(true);}if(Camera_actions.moveDown){speed=speed+0.02;moveCar(false);}}if(Camera_actions.moveslow)//小车加速,响应L键盘按钮{if(Camera_actions.moveUp&&speed>1)						{speed=speed-0.02;moveCar(true);}}if(Camera_actions.moveUp==false&&speed>1) {speed-=0.05;moveCar(true);}if(Camera_actions.moveUp) {if(Camera_actions.moveLeft) {hpRoll.heading -= radian;viewer.camera.rotateRight(radian);}if(Camera_actions.moveRight) {hpRoll.heading += radian;viewer.camera.rotateLeft(radian);}moveCar(true);}if(Camera_actions.moveDown) {if(Camera_actions.moveLeft) {hpRoll.heading -= radian;viewer.camera.rotateRight(radian);}if(Camera_actions.moveRight) {hpRoll.heading += radian;viewer.camera.rotateLeft(radian);}moveCar(false);}});});function moveCar(isUP) {// 计算速度矩阵if(isUP > 0) {if(Camera_actions.piaoyi)//小车加速,响应K键盘按钮	{if(Camera_actions.moveLeft){speedVector = Cesium.Cartesian3.multiplyByScalar(new Cesium.Cartesian3(1,-1,0.0), speed, speedVector);}if(Camera_actions.moveRight){speedVector = Cesium.Cartesian3.multiplyByScalar(new Cesium.Cartesian3(1,1,0.0), speed, speedVector);}}else{speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed, speedVector);}} else {speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, -speed, speedVector);}// 根据速度计算出下一个位置的坐标position = Cesium.Matrix4.multiplyByPoint(carPrimitive.modelMatrix, speedVector, position);trackedEntity.position = position;// 小车移动Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransforms, carPrimitive.modelMatrix);}

关于Camera的实战讲解就到这里了,当然大家还可以在此基础上衍生出更多功能,实现键盘与模型更多的交互性。