cesium入门(四)3D Tiles,模型旋转

旋转矩阵

cesium入门(四)3D Tiles,模型旋转_第1张图片
设计步骤:

  1. 设置视图中模型的参数,并将其与工具条绑定
  2. 加载模型数据
  3. 相机视角设置
  4. 监控模型各个参数的变化

完成代码:


<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 Demotitle>
    <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-offsetdiv>
    <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>RotateXdiv>
    <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>RotateYdiv>
    <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>RotateZdiv>
    <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)