cesium入门(四)3D Tiles,模型旋转
旋转矩阵
设计步骤:
- 设置视图中模型的参数,并将其与工具条绑定
- 加载模型数据
- 相机视角设置
- 监控模型各个参数的变化
完成代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Adjust the height of a 3D Tiles tileset.">
<meta name="cesium-sandcastle-labels" content="3D Tiles">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
if(typeof require === "function") {
require.config({
baseUrl : '../../../Source',
waitSeconds : 120
});
}
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
<div id="cesiumContainer" class="fullSize">
<div id="cesiumxin" style="position:fixed;left:0;z-index:99"><a href="http://cesium.xin" style="color:aliceblue;text-decoration:none">cesium中文网 http://cesium.xin </a></div>
</div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div>Height-offset</div>
<input type="range" min="-100.0" max="100.0" step="1" data-bind="value: height, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: height">
<div>RotateX</div>
<input type="range" min="-100.0" max="100.0" step="1" data-bind="value: RotateX, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: RotateX">
<div>RotateY</div>
<input type="range" min="-100.0" max="100.0" step="1" data-bind="value: RotateY, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: RotateY">
<div>RotateZ</div>
<input type="range" min="-100.0" max="100.0" step="1" data-bind="value: RotateZ, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: RotateZ">
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer', {
shadows : true
});
viewer.scene.globe.depthTestAgainstTerrain = true;
//1、设置view中模型的四个初始参数,并将其与工具条绑定
var viewModel = {
height: 0,
RotateX:0,
RotateY:0,
RotateZ:0
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
//2、加载tileset数据
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url : '../../../Specs/Data/Cesium3DTiles/Tilesets/Tileset',
modelMatrix:Cesium.Matrix4.IDENTITY
}));
//3、加载完数据后,进行相机视角设置
tileset.readyPromise.then(function() {
var boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius * 2));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}).otherwise(function(error) {
throw(error);
});
//4、监控模型各个参数的变化,有变化则通过旋转矩阵自动调整
Cesium.knockout.getObservable(viewModel, 'height').subscribe(function(height) {
height = Number(height);
if (isNaN(height)) {
return;
}
var m = tileset.modelMatrix;
var translation=Cesium.Cartesian3.fromArray([0, 0, height]);
Cesium.Matrix4.multiplyByTranslation(m,translation,m);
tileset.modelMatrix = m;
});
var m = tileset.modelMatrix;
Cesium.knockout.getObservable(viewModel, 'RotateX').subscribe(function(RotateX) {
RotateX = Number(RotateX);
if (isNaN(RotateX)) {
return;
}
var m1 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(RotateX));
tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m,m1,new Cesium.Matrix4());
});
Cesium.knockout.getObservable(viewModel, 'RotateY').subscribe(function(RotateY) {
RotateY = Number(RotateY);
if (isNaN(RotateY)) {
return;
}
var m1 = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(RotateY));
tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m,m1,new Cesium.Matrix4());
});
Cesium.knockout.getObservable(viewModel, 'RotateZ').subscribe(function(RotateZ) {
RotateZ = Number(RotateZ);
if (isNaN(RotateZ)) {
return;
}
var m1 = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(RotateZ));
tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m,m1,new Cesium.Matrix4());
});//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
效果图: