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

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的实战讲解就到这里了,当然大家还可以在此基础上衍生出更多功能,实现键盘与模型更多的交互性。