Cesium三维模型_cesium3dtieset-CSDN博客

本文链接：https://blog.csdn.net/qq_40640910/article/details/135876912

文章目录

0.引言
1._3D Tiles模型高度调整
2._3D Tiles模型旋转平移
3._3D Tiles模型缩放
4._3D Tiles模型单体化
5._3D Tiles要素拾取
6._3D Tiles要素风格
7._3D模型着色
8. 贴合3D模型
9.模拟小车移动

0.引言

现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium作为三维GIS框架，其最大的优势就是支持各种格式的三维模型数据，包括倾斜摄影三维模型、BIM三维模型、glb三维模型等，并且用户可以使用关键帧动画等动态地模拟三维场景。本文将介绍Cesium中常用的三维模型操作并举例说明。

1._3D Tiles模型高度调整

3D Tiles数据格式是Cesium支持的一种标准，包括BIM模型、倾斜摄影三维模型等都需要通过一定手段或软件处理成3D Tiles模型后才可以在Cesium中加载。在3D Tiles模型制作过程中，如果原始数据具有高程信息，那么生产的3D Tiles模型数据也会存在高程数据，但是有时由于原始数据中的高程信息不准确，生产出来的3D Tiles模型并不能很好地贴合地形，而是悬浮在空中，因此在Cesium中加载倾斜摄影三维模型之后，需要手动地对模型进行高度调整以达到贴合地形的要求。Cesium API为我们提供了相关的类和方法，使得我们可以在3D Tiles模型数据加载完成之后，动态地调整3D Tiles模型整体的高度。下面以大雁塔倾斜摄影三维模型为例，展示如何在Cesium中动态地调整3D Tiles模型高度。
（1）实现代码
在这里插入图片描述

5_1_3D Tiles模型高度调整.html

<!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.0">  
  <title>三维模型篇_3D Tiles模型高度调整</title>  
  <script src="./Build/Cesium/Cesium.js"></script>  
  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">  
  <style>  
    html,  
    body,  
    #cesiumContainer {  
      width: 100%;  
      height: 100%;  
      margin: 0;  
      padding: 0;  
      overflow: hidden;  
    }  
  
    .heightAdjustDiv {
     
      position: absolute;  
      top: 10px;  
      left: 20px;  
      background-color: rgba(0, 0, 0, 0.6);  
    }  
  </style>  
</head>  
  
<body>  
  <div id="cesiumContainer">  
  </div>  
  
  <div class="heightAdjustDiv">  
    <label style="color: white;">高度</label> <br />  
    <input type="range" min="-100" max="100" step="1" oninput="change()" id="R" value="0">  
    <input type="text" style="width:70px; " id="heightValue" value="0" onchange="change2()">  
  </div>  
  <script>  
    Cesium.Ion.defaultAccessToken =  
      '你的token';  
    var viewer = new Cesium.Viewer("cesiumContainer", {
     
      geocoder: true, //是否显示地名查找工具  
      homeButton: true, //是否显示首页位置工具  
      sceneModePicker: true, //是否显示视角模式切换工具  
      baseLayerPicker: false, //是否显示默认图层选择工具  
      navigationHelpButton: true, //是否显示导航帮助工具  
      animation: false, //是否显示动画工具  
      timeline: false, //是否显示时间轴工具  
      fullscreenButton: true, //是否显示全屏按钮工具  
      terrainProvider: Cesium.createWorldTerrain()  
    });  
  
    viewer.scene.globe.depthTestAgainstTerrain = true;  
  
    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
     
      url: './倾斜摄影/大雁塔3DTiles/tileset.json'  
    }));  
  
    viewer.zoomTo(tileset);  
  
    const R = document.getElementById("R");  
  
    //当滑动条变化时调用该函数  
    function change() {
     
      //拿到滑动条当前值  
      var height = Number(R.value);  
      //文本框显示当前值  
      heightValue.value = height;  
  
      //判断是否为数字，不是数字则return  
      if (isNaN(height)) {
     
        return;  
      }  
  
      //将3D Tiles外包围球中心点从笛卡尔空间直角坐标转换为弧度表示  
      const cartographic = Cesium.Cartographic.fromCartesian(  
        tileset.boundingSphere.center //3D Tiles外包围球中心  
      );  
  
      //3D Tiles外包围球中心点原始坐标  
      const surface = Cesium.Cartesian3.fromRadians(  
        cartographic.longitude,  
        cartographic.latitude,  
      );  
  
      //3D Tiles外包围球中心点坐标偏移  
      const offset = Cesium.Cartesian3.fromRadians(  
        cartographic.longitude,  
        cartographic.latitude,  
        height  
      );  
  
      //计算两个笛卡尔分量的差异  
      const translation = Cesium.Cartesian3.subtract(  
        offset,  
        surface,  
        new Cesium.Cartesian3()  
      );  
  
      //创建一个表示转换的Matrix4  
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);  
    }  
  
    function change2() {
     
      var height = Number(heightValue.value);  
      R.value = height;  
      change();  
    }  
  </script>  
</body>  
  
</html>

（2）结果显示
变换前：
在这里插入图片描述
变换后：

2._3D Tiles模型旋转平移

下面以大雁塔倾斜摄影三维模型为例，展示如何在Cesium中动态地对3D Tiles模型进行旋转平移操作。
（1）实现代码
在这里插入图片描述

5_2_3D Tiles模型旋转平移.html

<!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.0">  
    <title>三维模型篇_3D Tiles模型旋转平移</title>  
    <script src="./Build/Cesium/Cesium.js"></script>  
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">  
    <!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> -->  
    <style>  
        html,  
        body,  
        #cesiumContainer {  
            width: 100%;  
            height: 100%;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
        }  
    .adjust3DTilesDiv {
     
        position: absolute;  
        top: 10px;  
        left: 20px;  
        background-color: rgba(0, 0, 0, 0.6);  
    }  
    </style>  
  
</head>  
  
<body>  
    <div id="cesiumContainer">  
    </div>  
    <div class="adjust3DTilesDiv">  
        <label style="color: white;">X轴旋转</label> <br />  
        <input type="range" min="-100" max="100" step="1" oninput="rotation()" id="Rx" value="0">  
        <input type="text" style="width:70px; " id="RxValue" value="0" onchange="rotationX()"> <br>  
        <label style="color: white;">Y轴旋转</label> <br />  
        <input type="range" min="-100" max="100" step="1" oninput="rotation()" id="Ry" value="0">  
        <input type="text" style="width:70px; " id="RyValue" value="0" onchange="rotationY()"> <br>  
        <label style="color: white;">Z轴旋转</label> <br />  
        <input type="range" min="-100" max="100" step="1" oninput="rotation()" id="Rz" value="0">  
        <input type="text" style="width:70px; " id="RzValue" value="0" onchange="rotationZ()"> <br>  
    <label style="color: white;">经度平移</label> <br />  
    <input type="range" min="-100" max="100" step="1" oninput="translation()" id="Tlon" value="0">  
    <input type="text" style="width:70px; " id="TlonValue" value="0" onchange="translationLon()"> <br>  
    <label style="color: white;">纬度平移</label> <br />  
    <input type="range" min="-100" max="100" step="1" oninput="translation()" id="Tlat" value="0">  
    <input type="text" style="width:70px; " id="TlatValue" value="0" onchange="translationLat()"> <br>  
    </div>  
    <script>  
        Cesium.Ion.defaultAccessToken = '你的token';  
        var viewer = new Cesium.Viewer("cesiumContainer", {
     
            geocoder: true,  //是否显示地名查找工具  
            homeButton: true,    //是否显示首页位置工具  
            sceneModePicker: true,   //是否显示视角模式切换工具  
            baseLayerPicker: true,   //是否显示默认图层选择工具  
            navigationHelpButton: true,  //是否显示导航帮助工具  
            animation: false, //是否显示动画工具  
            timeline: false,  //是否显示时间轴工具  
            fullscreenButton: true,  //是否显示全屏按钮工具  
            //terrainProvider: Cesium.createWorldTerrain()  
        });  
    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
     
        url: './倾斜摄影/大雁塔3DTiles/tileset.json'  
    }));  
    viewer.zoomTo(tileset);  
    var cartographic;  
    var params;  
    tileset.readyPromise.then(function () {
     
        cartographic = Cesium.Cartographic.fromCartesian(  
            tileset.boundingSphere.center //倾斜摄影模型外包围球中心  
  
        );  
      console.log('cartographic',cartographic);  
  
    params = {
     
        tx: Cesium.Math.toDegrees(cartographic.longitude), //模型中心X轴坐标（经度，单位：十进制度）  
        ty: Cesium.Math.toDegrees(cartographic.latitude), //模型中心Y轴坐标（纬度，单位：十进制度）  
        tz: 0, //模型中心Z轴坐标（高程，单位：米）  
        rx: 0, //X轴（经度）方向旋转角度（单位：度）  
        ry: 0, //Y轴（纬度）方向旋转角度（单位：度）  
        rz: 0 ,//Z轴（高程）方向旋转角度（单位：度）  
    };  
    })  
    //平移旋转函数  
    function update3dtilesMaxtrix(params) {
     
        //旋转  
        let mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));  
        let my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));  
        let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));  
        let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);  
        let rotationY = Cesium.Matrix4.fromRotationTranslation(my);  
        let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);  
    //平移  
    let position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);  
    console.log('position',position);  
  
      let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);  
  
    //旋转、平移矩阵相乘  
    Cesium.Matrix4.multiply(m, rotationX, m);  
    Cesium.Matrix4.multiply(m, rotationY, m);  
    Cesium.Matrix4.multiply(m, rotationZ, m);  
    //返回结果矩阵  
    return m;  
    }  
    //Rx、Ry、Rz旋转滑动条  
    function rotation(){
     
        //拿到x轴旋转滑动条当前值  
        var rx = Number(Rx