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之家小专栏此文章

文章提供源码，对本专栏感兴趣的话，可以关注一波