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
