3d旋转相册代码源码_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); 
            }); 
        } 

• 核心函数：

更多详情以及源码见下面链接：

cesium 实现 3d-tiles 平移旋转贴地(附源码下载) － 小专栏​xiaozhuanlan.com

对本专栏感兴趣的话，可以关注一波

GIS之家店铺：GIS之家
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询