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