Camera
viewer.camera 是快捷方式，访问的是 viewer.scene.camera
camera.move... 相机平移
camera.look.. 相机旋转
示例
http://localhost:8080/Apps/Sandcastle/index.html?src=Camera%20Tutorial.html&label=All
image.png
// disable the default event handlers 首先禁用原有默认操控方式
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;
。。。
//相机事件
viewer.clock.onTick.addEventListener(function(clock) {
var camera = viewer.camera;
if (flags.looking) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
// Coordinate (0.0, 0.0) will be where the mouse was clicked.
var x = (mousePosition.x - startMousePosition.x) / width;
var y = -(mousePosition.y - startMousePosition.y) / height;
var lookFactor = 0.05;
camera.lookRight(x * lookFactor);
camera.lookUp(y * lookFactor);
}
// Change movement speed based on the distance of the camera to the surface of the ellipsoid.
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = cameraHeight / 100.0;
if (flags.moveForward) {
camera.moveForward(moveRate);
}
if (flags.moveBackward) {
camera.moveBackward(moveRate);
}
if (flags.moveUp) {
camera.moveUp(moveRate);
}
if (flags.moveDown) {
camera.moveDown(moveRate);
}
if (flags.moveLeft) {
camera.moveLeft(moveRate);
}
if (flags.moveRight) {
camera.moveRight(moveRate);
}
});
http://localhost:8080/Apps/Sandcastle/index.html?src=Camera.html&label=All
image.png
destination 目标点， 可以是一个点，也可是是一个区域
orientation 相机的目标点角度，默认北向
duration:
flyOverLongitude: 中途经过角度
// 监测相机移动事件
function cameraChanges() {
Sandcastle.declare(cameraChanges);
var i = 0;
removeChanged = viewer.camera.changed.addEventListener(function(percentage) {
++i;
cameraChanged.innerText = 'Camera Changed: ' + i + ', ' + percentage.toFixed(6);
cameraChanged.style.display = 'block';
});
}
function flyToHeadingPitchRoll() {
Sandcastle.declare(flyToHeadingPitchRoll);
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
orientation : {
heading : Cesium.Math.toRadians(20.0),// 朝北为0，20度表示朝东20度
pitch : Cesium.Math.toRadians(-35.0), //
roll : 0.0
}
});
}
function flyToRectangle() {
Sandcastle.declare(flyToRectangle);
var west = -90.0;
var south = 38.0;
var east = -87.0;
var north = 40.0;
var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
viewer.camera.flyTo({
destination : rectangle
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle : {
coordinates : rectangle,
fill : false,
outline : true,
outlineColor : Cesium.Color.WHITE
}
});
}
function setHeadingPitchRoll() {
Sandcastle.declare(setHeadingPitchRoll);
var camera = viewer.camera;
camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
orientation: {
heading : -Cesium.Math.PI_OVER_TWO,
pitch : -Cesium.Math.PI_OVER_FOUR,
roll : 0.0
}
});
}
function losAngelesToTokyo(adjustPitch) {
var camera = scene.camera;
var tokyoOptions = {
destination : Cesium.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
orientation: {
heading : Cesium.Math.toRadians(15.0),
pitch : Cesium.Math.toRadians(-60),
roll : 0.0
},
duration: 20,
flyOverLongitude: Cesium.Math.toRadians(60.0) //控制飞行效果，途径欧洲
};
var laOptions = {
destination : Cesium.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
duration: 5,
orientation: {
heading : Cesium.Math.toRadians(-15.0),
pitch : -Cesium.Math.PI_OVER_FOUR,
roll : 0.0
}
};
laOptions.complete = function() { //回调函数
setTimeout(function() {
camera.flyTo(tokyoOptions);
}, 1000);
};
if (adjustPitch) {//飞起来时调整俯仰角达到垂直朝下看效果，越高度超过1000米，修改俯仰角朝正下
tokyoOptions.pitchAdjustHeight = 1000;
laOptions.pitchAdjustHeight = 1000;
}
camera.flyTo(laOptions);
}
camera.lookAtTransform 相当于 绕着参考坐标系transform的中心旋转;
//若没有自定义参考坐标系，默认的时单位矩阵，中心点在地球的正中心。
image.png
function setReferenceFrame() {
Sandcastle.declare(setReferenceFrame);
var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);//确定transform坐标系
//lookAtTransform 第一个参数确定参考点 相当于 绕着参考坐标系transform的中心旋转
//lookAtTransform 第二个参数是相机的位置
// View in east-north-up frame
var camera = viewer.camera;
camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
camera.lookAtTransform(transform, new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0));
// Show reference frame. Not required.
referenceFramePrimitive = scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
modelMatrix : transform,
length : 100000.0
}));
}
camera.position 相对于参考坐标系的坐标值Cartesian3，格式xyz
camera.positionWC 相对于地球中心点的坐标Cartesian3，格式 xyz
camera.positionCartographic... 坐标格式Cartographic 经纬度
camera.transform 相机参考坐标系
image.png
image.png
viewInICRF
效果是 相机不动，地球在动；实际上还是改变的相机的Transform，保持camera.position不变
//实现时camera.position始终不变，改变camera.Transform
function icrf(scene, time) {
if (scene.mode !== Cesium.SceneMode.SCENE3D) {
return;
}
var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
if (Cesium.defined(icrfToFixed)) {
var camera = viewer.camera;
var offset = Cesium.Cartesian3.clone(camera.position);
var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
camera.lookAtTransform(transform, offset);
}
}
function viewInICRF() {
Sandcastle.declare(viewInICRF);
viewer.camera.flyHome(0);
clock.multiplier = 3 * 60 * 60;
scene.postUpdate.addEventListener(icrf);
scene.globe.enableLighting = true;
}
Scene的api文档查看
https://cesium.com/downloads/cesiumjs/releases/1.57/Build/Documentation/Scene.html?classFilter=Scene
-
1 调试类函数 debugShowFramesPerSecond/debugShowGlobeDepth/...
image.png
2 WebGL渲染状态 logarithmicDepthBuffer/mode
当 Cesium 单个模型过长时，会遇到某些视角模型显示不完整的问题3 事件 preRender/postUpdate/postRender/preUpdate/renderError
先更新再渲染,顺序
-
4 环境对象 sun/moon/skyBox/...
image.png
5 camera相机
6 后处理相关示例
调试用的函数 debugShowFramesPerSecond debugShowDepthFrustum debugShowGlobeDepth
cartesianToCanvasCoordinates(position, result) 三维场景坐标 转换到屏幕坐标
clampToHeight
clampToHeightMostDetailed 获取最精细的高度，精度更准确，操作时间更长；获取完数据再求交；
pickPosition 在屏幕看到的资源里面求交，不需要再次请求数据；
drillPick 射线求交时具有穿透力，
pick 射线求交时没有穿透力，
打开源码的方式二
image.png
image.png
