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>
效果图：
在这里插入图片描述
cesium入门（四）3D Tiles，模型旋转

旋转矩阵

猜你喜欢
