cesium 實現 3d-tiles 平移旋轉貼地(附源碼下載)

前言

cesium 官網的api文檔介紹地址cesium官網api，里面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。

內容概覽

1.基於cesium 實現 3d-tiles 平移旋轉貼地
2.源代碼 demo 下載

本篇實現 3d-tiles 平移旋轉貼地，效果圖如下：

實現思路：核心就是根據旋轉、平移矩陣相乘來改變調整 3d-tiles 模型，利用 cesium 函數 Cesium.Matrix3.fromRotationX、Cesium.Matrix3.fromRotationY、Cesium.Matrix3.fromRotationZ、Cesium.Matrix4.fromRotationTranslation、Cesium.Matrix4.multiply等等

• 界面滑條動態調整模型位置：

• var buttonx1 = document.getElementById('buttonx-');
• var buttonx2 = document.getElementById('buttonx+');
• var buttonx3 = document.getElementById('buttony-');
• var buttonx4 = document.getElementById('buttony+');
• var sliderx = document.getElementById('slider-x');
• var sliderValuex = document.getElementById('slider-value-x');
• var slidery = document.getElementById('slider-y');
• var sliderValuey = document.getElementById('slider-value-y');
• var sliderHeight = document.getElementById('slider-Height');
• var sliderValueHeight = document.getElementById('slider-value-Height');
• var sliderRotateX = document.getElementById('slider-RotateX');
• var sliderValueRotateX = document.getElementById('slider-value-RotateX');
• var sliderRotateY = document.getElementById('slider-RotateY');
• var sliderValueRotateY = document.getElementById('slider-value-RotateY');
• var sliderRotateZ = document.getElementById('slider-RotateZ');
• var sliderValueRotateZ = document.getElementById('slider-value-RotateZ');
• window.onload = function (){
• buttonx1.addEventListener( 'click', function(e) {
• params.tx = params.tx - 0.0001;
• if (isNaN(params.tx)) {
• return;
• }
• sliderValuex.textContent = params.tx;
• update3dtilesMaxtrix(tileset);
• });
• buttonx2.addEventListener( 'click', function(e) {
• params.tx = params.tx + 0.0001;
• if (isNaN(params.tx)) {
• return;
• }
• sliderValuex.textContent = params.tx;
• update3dtilesMaxtrix(tileset);
• });
• sliderx.addEventListener( 'input', function(e) {
• sliderValuex.textContent = e.target.value;
• params.tx = Number(e.target.value);
• if (isNaN(params.tx)) {
• return;
• }
• update3dtilesMaxtrix(tileset);
• });
•  
• buttonx3.addEventListener( 'click', function(e) {
• params.ty = params.ty - 0.0001;
• if (isNaN(params.ty)) {
• return;
• }
• sliderValuey.textContent = params.ty;
• update3dtilesMaxtrix(tileset);
• });
• buttonx4.addEventListener( 'click', function(e) {
• params.ty = params.ty + 0.0001;
• if (isNaN(params.ty)) {
• return;
• }
• sliderValuey.textContent = params.ty;
• update3dtilesMaxtrix(tileset);
• });
• slidery.addEventListener( 'input', function(e) {
• sliderValuey.textContent = e.target.value;
• params.ty = Number(e.target.value);
• if (isNaN(params.ty)) {
• return;
• }
• update3dtilesMaxtrix(tileset);
• });
•  
• sliderHeight.addEventListener( 'input', function(e) {
• sliderValueHeight.textContent = e.target.value;
• params.tz = Number(e.target.value);
• if (isNaN(params.tz)) {
• return;
• }
• update3dtilesMaxtrix(tileset);
• });
•  
• sliderRotateX.addEventListener( 'input', function(e) {
• sliderValueRotateX.textContent = e.target.value;
• params.rx = Number(e.target.value);
• if (isNaN(params.rx)) {
• return;
• }
• update3dtilesMaxtrix(tileset);
• });
•  
• sliderRotateY.addEventListener( 'input', function(e) {
• sliderValueRotateY.textContent = e.target.value;
• params.ry = Number(e.target.value);
• if (isNaN(params.ry)) {
• return;
• }
• update3dtilesMaxtrix(tileset);
• });
•  
• sliderRotateZ.addEventListener( 'input', function(e) {
• sliderValueRotateZ.textContent = e.target.value;
• params.rz = Number(e.target.value);
• if (isNaN(params.rz)) {
• return;
• }
• update3dtilesMaxtrix(tileset);
• });
• }

• 核心函數：

更多詳情見下面鏈接文章：

GIS之家小專欄此文章

文章提供源碼，對本專欄感興趣的話，可以關注一波