Cesium模型裁切原理

已于 2022-10-13 11:18:20 修改
阅读量3.1k 收藏 10
点赞数 3
分类专栏： # Cesium WebGIS 文章标签： javascript
于 2022-08-27 14:32:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37987033/article/details/126556930
版权

文章目录

前言

Cesium的官方示例中提供了3D模型裁切获取剖切面的示例3DTilesClippingPlanes，相信很多初次接触cesium的小伙伴第一次看时都会和我一样，虽然本地能跑起来，但是对整个流程缺乏整体的理解，最近整理了一下这个流程并记录下来。

步骤

加载模型数据

在这里我以官网内置的3d tiles示例作为例子。
在这里插入图片描述

  • 首先，通过viewer.scene.primitives.add方法加载模型，同时为他添加裁切面clippingPlanes，Cesium.ClippingPlane的参数可去官网api查阅，这里不一一介绍。
  • 其次，当模型加载完毕时，在readyPromise中进行一系列操作：如果这个模型的根转换矩阵Matrix4不等于Cesium.Matrix4.IDENTITY时，即不在cesium笛卡尔坐标原点时（一般都不可能在），要通过这个矩阵获取剖切面和模型所在的笛卡尔坐标；最终获取剖切面的转换矩阵。
  • 最后，为clippingPlanes添加面时，同时给改面绑定createPlaneUpdateFunction()方法，这个方法将会在后续绑定的鼠标事件中被不断调用。

在这里，要简单说明下模型的转换矩阵，根节点的transform，其实就是整个模型对于cesium中心的转移矩阵，他是一个4*4数组，cesium中的getTranslation方法实现了通过转换矩阵获取笛卡尔坐标的方式，通过源码可以发现转换矩阵的13-15项，实际上就是该模型的笛卡尔坐标（x,y,z）。
在这里插入图片描述
在这里插入图片描述
这个流程里还用到的方法包括：

  • Cesium.Cartographic.fromCartesian // 笛卡尔坐标=> wgs84坐标
  • Cesium.Matrix4.fromTranslatio //从一个Cartesian3对象生成Matrix4变换矩阵
  • Cesium.CallbackProperty / Cesium中的entities实现长度高度变化动画，基本都使用这个函数

这部分代码如下：

function loadTileset(url) {
      // 定义一个ClippingPlaneCollection类，用来存储裁剪面
      clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [ // ClippingPlane对象数组集合
          new Cesium.ClippingPlane( // 裁切面
            new Cesium.Cartesian3(0.0, 0.0, -1.0), // 法线方向
            0.0 // 原点到平面的最短距离，设置0就好
          ),
        ],
        edgeWidth: 1.0, // 模型被裁切部分的截面线宽
      });

      tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: url,
          clippingPlanes: clippingPlanes,
        })
      );

      tileset.debugShowBoundingVolume = true
      return tileset.readyPromise
        .then(function () {
          // cesium.BoundingSphere(center:Cartersian3, radius:number), tileset的球状边界
          const boundingSphere = tileset.boundingSphere;
          const radius = boundingSphere.radius;

          viewer.zoomTo(
            tileset,
            new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)
          );
          debugger;
            
          if (
            !Cesium.Matrix4.equals(   // Cesium.Matrix4.equals(a,b)判断两个四维矩阵是否相等
              tileset.root.transform, // 整个根节点模型矩阵，该tileSet=>世界坐标系
              Cesium.Matrix4.IDENTITY // 单位矩阵，对角线值为1.0的4*4矩阵
            )
          ) {
            // The clipping plane is initially positioned at the tileset's root transform.
            // Apply an additional matrix to center the clipping plane on the bounding sphere center.
            
            // 获取模型的世界坐标(笛卡尔)
            // Cesium.Matrix4.getTranslation 通过仿射变换矩阵获取该tileSet的世界坐标
            const transformCenter = Cesium.Matrix4.getTranslation(
              tileset.root.transform,
              new Cesium.Cartesian3()
            );
            debugger;
            // 将笛卡尔坐标转换为WGS84经纬度坐标（模型的）
            const transformCartographic = Cesium.Cartographic.fromCartesian(
              transformCenter
            );
            // 将笛卡尔坐标转换为WGS84经纬度坐标（截面的）
            const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(
              tileset.boundingSphere.center
            );
            const height =
              boundingSphereCartographic.height - transformCartographic.height;
           
            // 从一个Cartesian3对象生成Matrix4变换矩阵（裁切面的）
            clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(
              new Cesium.Cartesian3(0.0, 0.0, height)
            );
          }
          // debugger;

          // 创建添加裁剪平面
          for (let i = 0; i < clippingPlanes.length; ++i) {
            const plane = clippingPlanes.get(i);
            const planeEntity = viewer.entities.add({
              position: boundingSphere.center,
              plane: {
                dimensions: new Cesium.Cartesian2(
                  radius * 2.5,
                  radius * 2.5
                ),
                material: Cesium.Color.WHITE.withAlpha(0.1),
                plane: new Cesium.CallbackProperty(
                  // 添加绑定事件，不断调用
                  createPlaneUpdateFunction(plane),
                  false
                ),
                outline: true,
                outlineColor: Cesium.Color.WHITE,
              },
            });

            planeEntities.push(planeEntity);
          }
          return tileset;
        })
        .catch(function (error) {
          console.log(error);
        });
    }

添加监听事件

分别给鼠标绑定三种事件：LEFT_DOWN，LEFT_UP，MOUSE_MOVE。当MOUSE_MOVE触发时，会不断刷新targetY 的值。LEFT_DOWN，LEFT_UP代表左键按下弹起事件，触发时需要设置scene.screenSpaceCameraController.enableInputs 禁用/恢复原本鼠标默认事件（放大缩小）。targetY值发生变化时，不断回调的CallbackProperty 会获取最新的targetY ，重新设置裁切面的distance属性实现动画效果，至于模型是怎么随着裁切面的位置隐藏的，可以去看一下源码Cesium3DTileset中对clippingPlanes这个参数的具体实现。

// 左键按下
const downHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    );
    downHandler.setInputAction(function (movement) {
      const pickedObject = scene.pick(movement.position);
  
      console.log('pickedObject---downHandler---', pickedObject)
      if (
        Cesium.defined(pickedObject) &&
        Cesium.defined(pickedObject.id.plane)
      ) {
        selectedPlane = pickedObject.id.plane;
        selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.5);
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        scene.screenSpaceCameraController.enableInputs = false;
      }
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

    // Release plane on mouse up
    const upHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    );
    // 左键松开
    upHandler.setInputAction(function () {
      if (Cesium.defined(selectedPlane)) {
        selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1);
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        selectedPlane = undefined;
      }
      scene.screenSpaceCameraController.enableInputs = true;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);

    // Update plane on mouse move
    const moveHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    );
    // 鼠标移动事件
    moveHandler.setInputAction(function (movement) {
      // console.log('moveHandler+++++')
      if (Cesium.defined(selectedPlane)) {
        console.log('moveHandler---')
        console.log(movement)
        const deltaY = movement.startPosition.y - movement.endPosition.y;
        targetY += deltaY;
        console.log(targetY)
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

完整代码

用的是react，直接放到useEffect里了，相当于Vue的mounted生命周期。

// @ts-nocheck
import React, { useState, useEffect, useRef, useCallback } from 'react'
import * as Cesium from 'cesium'

const Clip = () => {

  useEffect(() => {
    // Add a clipping plane, a plane geometry to show the representation of the
    // plane, and control the magnitude of the plane distance with the mouse.
    const viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false,
      selectionIndicator: false,
    });
    const scene = viewer.scene;

    let targetY = 0.0;
    let planeEntities = [];
    let selectedPlane;
    let clippingPlanes;

    // Select plane when mouse down
    // 绑定上移动事件
    const downHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    );
    downHandler.setInputAction(function (movement) {
      const pickedObject = scene.pick(movement.position);
  
      console.log('pickedObject---downHandler---', pickedObject)
      if (
        Cesium.defined(pickedObject) &&
        Cesium.defined(pickedObject.id.plane)
      ) {
        selectedPlane = pickedObject.id.plane;
        selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.5);
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        scene.screenSpaceCameraController.enableInputs = false;
      }
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

    // Release plane on mouse up
    // 绑定下移动事件
    const upHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    );
    upHandler.setInputAction(function () {
      if (Cesium.defined(selectedPlane)) {
        selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1);
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        selectedPlane = undefined;
      }

      scene.screenSpaceCameraController.enableInputs = true;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);

    // Update plane on mouse move
    const moveHandler = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas
    );
    moveHandler.setInputAction(function (movement) {
      // console.log('moveHandler+++++')
      if (Cesium.defined(selectedPlane)) {
        console.log('moveHandler---')
        console.log(movement)
        const deltaY = movement.startPosition.y - movement.endPosition.y;
        targetY += deltaY;
        console.log(targetY)
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    function createPlaneUpdateFunction(plane) {
      return function () {
        plane.distance = targetY;
        return plane;
      };
    }

    let tileset: Cesium.Cesium3DTileset;
    function loadTileset(url) {
      // 定义一个ClippingPlaneCollection类，用来存储裁剪面
      clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [ // ClippingPlane对象数组集合
          new Cesium.ClippingPlane( // 裁切面
            new Cesium.Cartesian3(0.0, 0.0, -1.0), // 法线方向
            0.0 // 原点到平面的最短距离，设置0就好
          ),
        ],
        edgeWidth: 1.0, // 模型被裁切部分的截面线宽
      });

      tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: url,
          clippingPlanes: clippingPlanes,
        })
      );

      tileset.debugShowBoundingVolume = true
      return tileset.readyPromise
        .then(function () {
          // cesium.BoundingSphere(center:Cartersian3, radius:number), tileset的球状边界
          const boundingSphere = tileset.boundingSphere;
          const radius = boundingSphere.radius;

          viewer.zoomTo(
            tileset,
            new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)
          );
          debugger;
            
          if (
            !Cesium.Matrix4.equals(   // Cesium.Matrix4.equals(a,b)判断两个四维矩阵是否相等
              tileset.root.transform, // 整个根节点模型矩阵，该tileSet=>世界坐标系
              Cesium.Matrix4.IDENTITY // 单位矩阵，对角线值为1.0的4*4矩阵
            )
          ) {
            // The clipping plane is initially positioned at the tileset's root transform.
            // Apply an additional matrix to center the clipping plane on the bounding sphere center.
            
            // 获取模型的世界坐标(笛卡尔)
            // Cesium.Matrix4.getTranslation 通过仿射变换矩阵获取该tileSet的世界坐标
            const transformCenter = Cesium.Matrix4.getTranslation(
              tileset.root.transform,
              new Cesium.Cartesian3()
            );
            debugger;
            // 将笛卡尔坐标转换为WGS84经纬度坐标（模型的）
            const transformCartographic = Cesium.Cartographic.fromCartesian(
              transformCenter
            );
            // 将笛卡尔坐标转换为WGS84经纬度坐标（截面的）
            const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(
              tileset.boundingSphere.center
            );
            const height =
              boundingSphereCartographic.height - transformCartographic.height;
           
            // 从一个Cartesian3对象生成Matrix4变换矩阵（裁切面的）
            clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(
              new Cesium.Cartesian3(0.0, 0.0, height)
            );
          }
          // debugger;

          // 创建添加裁剪平面
          for (let i = 0; i < clippingPlanes.length; ++i) {
            const plane = clippingPlanes.get(i);
            const planeEntity = viewer.entities.add({
              position: boundingSphere.center,
              plane: {
                dimensions: new Cesium.Cartesian2(
                  radius * 2.5,
                  radius * 2.5
                ),
                material: Cesium.Color.WHITE.withAlpha(0.1),
                plane: new Cesium.CallbackProperty(
                  // 添加绑定事件，不断调用
                  createPlaneUpdateFunction(plane),
                  false
                ),
                outline: true,
                outlineColor: Cesium.Color.WHITE,
              },
            });

            planeEntities.push(planeEntity);
          }
          return tileset;
        })
        .catch(function (error) {
          console.log(error);
        });
    }

    // function loadModel(url) {
    //   clippingPlanes = new Cesium.ClippingPlaneCollection({
    //     planes: [
    //       new Cesium.ClippingPlane(
    //         new Cesium.Cartesian3(0.0, 0.0, -1.0),
    //         0.0
    //       ),
    //     ],
    //     edgeWidth:  1.0 ,
    //   });

    //   const position = Cesium.Cartesian3.fromDegrees(
    //     -123.0744619,
    //     44.0503706,
    //     300.0
    //   );
    //   const heading = Cesium.Math.toRadians(135.0);
    //   const pitch = 0.0;
    //   const roll = 0.0;
    //   const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    //   const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    //     position,
    //     hpr
    //   );
    //   const entity = viewer.entities.add({
    //     name: url,
    //     position: position,
    //     orientation: orientation,
    //     model: {
    //       uri: url,
    //       scale: 8,
    //       minimumPixelSize: 100.0,
    //       clippingPlanes: clippingPlanes,
    //     },
    //   });

    //   viewer.trackedEntity = entity;

    //   for (let i = 0; i < clippingPlanes.length; ++i) {
    //     const plane = clippingPlanes.get(i);
    //     const planeEntity = viewer.entities.add({
    //       position: position,
    //       plane: {
    //         dimensions: new Cesium.Cartesian2(300.0, 300.0),
    //         material: Cesium.Color.WHITE.withAlpha(0.1),
    //         plane: new Cesium.CallbackProperty(
    //           createPlaneUpdateFunction(plane),
    //           false
    //         ),
    //         outline: true,
    //         outlineColor: Cesium.Color.WHITE,
    //       },
    //     });

    //     planeEntities.push(planeEntity);
    //   }
    // }

    // Power Plant design model provided by Bentley Systems
    const bimUrl = Cesium.IonResource.fromAssetId(8564);
    // const pointCloudUrl = Cesium.IonResource.fromAssetId(16421);
    // const instancedUrl =
    //   "../SampleData/Cesium3DTiles/Instanced/InstancedOrientation/tileset.json";
    // const modelUrl = "../SampleData/models/CesiumAir/Cesium_Air.glb";

    loadTileset(bimUrl);

    // Track and create the bindings for the view model
    // function reset() {
    //   viewer.entities.removeAll();
    //   viewer.scene.primitives.remove(tileset);
    //   planeEntities = [];
    //   targetY = 0.0;
    //   tileset = undefined;
    // }


  }, [])


  return (
    <>
      <div id="cesiumContainer" className="fullSize" style={{ height: '100%' }}></div>
    </>


  )
}

export default Clip

总结

经验就是，多查官网文档，多打断点调试看看每一步生成什么，慢慢就理解了。

迦南giser
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Cesium 三维分析之【模型剖面】
喜欢钻研前端和分享技术
04-26 702
Cesium 三维分析之模型分析
Cesium地图上加载3DTiles模型
yangkunming12138的博客
10-12 1558
在Github上下载Building Tools插件，通过编辑-偏好设置-插件-安装，导入压缩包使用，这个可以自己创建小房子，文件-导出为obj格式。其中的options是一个配置文件，关于这个模型在地图上的位置等信息。完成后右侧会提示没有配置地图的相关信息，点击这个提示去配置。会生成两个文件.b3dm和目标json文件。add本地.obj，选择文件上传。选择底图类型，三维还是水平。
vue + Echart + Cesium 绘制剖面分析图源码
03-15
vue + Echart + Cesium 绘制剖面分析图源码
cesium ClippingPolygon多边形裁切
最新发布
tianyapai的专栏
06-17 1144
多边形裁切
cesium视频教程
10-15
本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。   
cesium-地面裁剪(多个剪切面)
孙霸天的专栏
02-10 4321
cesium-地面裁剪(多个剪切面) 介绍 我之前的文章介绍过地面裁剪的实现，这里介绍一下裁剪多个面的方式。 Cesium自带的ClippingPlaneCollection只能实现单凸多边形挖除，为了实现多个面的裁切和简单凹多边形，这里我们需要修源码以提供支持。 在github中的问题讨论中已经有人实现了，实现方式需要重新打包源码 具体的详解 实现效果 源码打包 这里我使用的cesium源码版本为：1.79.1下载地址 打包工具使用的是webstorm node.js版本为14.17.5 替换
基于cesium的地形开挖地形剖切
wangyong_h
09-28 7606
基于cesium地形开挖结合示例以及官方代码修改后封装TerrainClipPlan.js文件，在代码引入即可使用，详细介绍请往下看 一、地形剖切效果图 ： 图一 图二 二、核心代码 根据绘制范围构建剖切点数据 for (var r = 0; r < i; ++r) { var s = (r + 1) % i, u = Cesium.Cartographic.fromCartesian(e[r]), ...
cesium实景模型自动旋转
01-22
实景模型自动旋转，左键选中模型，开始旋转，右键结束旋转
cesium 飞机模型cesium 飞机模型
10-26
当我们提到“cesium 飞机模型”时，我们是在讨论如何在Cesium环境中展示3D飞机模型，使用户可以进行模拟飞行体验。 1. **Cesium简介** Cesium是由Analytical Graphics, Inc. (AGI)开发并维护的，旨在为Web提供无缝...
基于cesium 不规则形状裁剪倾斜模型
06-08
基于cesium 底层代码，不限制方向，随意绘制不规则形状，裁剪模型
cesium 倾斜模型的体积测量
06-25
有需要可V加我：v：ytyy133 傻瓜式操作倾斜模型体积测量，说明书在文章介绍
Cesium模型调整
12-22
大家下载了之后，把资源替换成你本地的，然后看下控制台，有的方法得自己改下，别再问为啥跑不了了。
cesium相机剖面实现
yangyoung4的博客
03-30 430
cesium相机剖切
Cesium,ClippingPlanes,任意剪裁面对3DTiles剪裁
BianLingSFW
12-13 8804
一、简介 相关官方文档地址:ClippingPlaneCollection、Cesium3DTileset 官方Demo地址:3D Tiles Clipping Planes 官方介绍:Cesium Feature Highlight: Clipping Planes 对于3DTiles和gltf，均可以通过ClippingPlaneCollection来实现显示时的模型剪裁显示，即仅显示模型的一...
cesium剖面分析
Raccon_的博客
10-14 1718
笔记
Cesium clipping planes 3dtiles模型剖切 3dtiles模型贴地 vue代码
weixin_43937851的博客
09-21 1015
使用Cesium的clippingPlanes实现对3dtiles模型的剖切效果。
CESIUM例子学习（十一）——3DTiles Clipping Planes（1）
luoyun620的博客
07-24 3479
3DTiles Clipping Planes例子，可以很容易实现对BIM、Point Cloud、Instanced、Model的任意剖切，其中Instanced是到底是一个什么对象，是怎么来的还不清楚。3DTiles Clipping Planes，对于BIM说来应用场景是有的，比如，需要查看一个建筑内部，应用从上到下的剖分，可以查看内部的结构。但对于点云和model有什么用呢？反正到现在我还没想出来。但从学习的角度去看，还是可以的。 一、模型剖切 ...
[Cesium]cesium里面的坐标系、相互转换关系以及平移问题
chengzhf的专栏
09-12 3897
网上帖子很多，这里解释一些重要问题。 GIS里面的坐标系系统 1、地理坐标系、大地坐标系、经纬度坐标系都是一个意思，都是用经纬度来表示。WGS84就是地理坐标系。 2、空间坐标是笛卡尔坐标系。 可以参照一些帖子，讲得比较详细 地理坐标系和投影坐标系之间的关系_lyf's blog-CSDN博客 Cesium里面的关键名词 Cartesian：笛卡尔。这个是以地心为坐标原点的。所以高度是个很大的值 Cartographic：以弧度为单位的经纬度坐标系。 没有以角度为单位的对象，需要自己转
Cesium中计算地理位置处的切面
yue1241630499的博客
06-22 310
【代码】Cesium中计算地理位置处的切面。
cesium 模型倒影
12-16
Cesium模型倒影是指在模型渲染中实现物体的镜像效果。在计算机图形学中，模型倒影是通过在模型下方创建一个镜像表面来实现的。 实现Cesium模型倒影的一种常见方法是使用反射纹理。反射纹理是用于指定模型镜像表面的贴图。该贴图通过将3D场景相机视角的反射结果投射到2D纹理上而生成。在渲染过程中，将反射纹理应用到模型的底部，以实现物体在表面下方的逼真镜像效果。 实现Cesium模型倒影的另一种方法是使用渲染到纹理（Render-to-Texture）技术。这种方法通过将场景渲染到一个纹理缓冲区而不是屏幕上，然后将该纹理应用到模型的底部，从而创建出倒影效果。 总之，Cesium模型倒影是在渲染过程中通过使用反射纹理或渲染到纹理技术来实现的。这种技术可以让模型在表面下方生成真实的镜像效果，提升了场景的逼真度和真实感。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值