cesium 3dtile ClippingPlanes 多边形挖洞ClippingPlaneCollection

原理就是3dtiles里面的属性clippingPlanes

采用ClippingPlaneCollection,构成多边形来挖洞。

其次就是xyz法向量挖洞

clippingPlanes: new this.ffCesium.Cesium.ClippingPlaneCollection({unionClippingRegions: true, // true 表示多个切割面能合并为一个有效的切割区域planes: [new this.ffCesium.Cesium.ClippingPlane(new this.ffCesium.Cesium.Cartesian3(0.0, 0.0, -1.0), // 法向量23.0 // 切割平面到原点的距离(高度))]
})

以下是多边形裁剪

import * as Cesium from 'cesium'
class tileSetClipByPolygon {constructor(options) {this.tileSet = options.tileSet || null  //3dtiles this.originPositions = options.originPositions || []  //点this.unionClippingRegions = !options.unionClippingRegions ? options.unionClippingRegions : truethis.enabled = !options.enabled ? options.enabled : truethis.edgeColor = options.edgeColor || Cesium.Color.WHITEthis.edgeWidth = options.edgeWidth || 0.0}isClockwise(polygon) {var area = 0var length = polygon.lengthfor (var i = 0; i < length; i++) {var j = (i + 1) % lengtharea += polygon[i][0] * polygon[j][1] - polygon[j][0] * polygon[i][1]}return area < 0}getInverseTransform() {let transformlet tmp = this.tileSet.root.transformif ((tmp && tmp.equals(Cesium.Matrix4.IDENTITY)) || !tmp) {// 如果root.transform不存在,则3DTiles的原点变成了boundingSphere.centertransform = Cesium.Transforms.eastNorthUpToFixedFrame(this.tileSet.boundingSphere.center)} else {transform = Cesium.Matrix4.fromArray(this.tileSet.root.transform)}return Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4())}clippingByPositions(clipping) {// debuggerconsole.log('this.tileSet', this.tileSet)this.tileSet.clippingPlanes = nullconst Cartesian3 = Cesium.Cartesian3const pointsLength = clipping.lengthconst clockwise = this.isClockwise(clipping)//所有的裁切面const clippingPlanes = []let positionsif (clockwise) {//如果为逆,则需要对数组取反positions = clipping.reverse()} else {positions = clipping}positions = clippingconst inverseTransform = this.getInverseTransform()for (let i = 0; i < pointsLength; ++i) {const nextIndex = (i + 1) % pointsLengthconst next = Cesium.Matrix4.multiplyByPoint(inverseTransform, Cesium.Cartesian3.fromDegrees(positions[nextIndex][0], positions[nextIndex][1]), new Cesium.Cartesian3())const now = Cesium.Matrix4.multiplyByPoint(inverseTransform, Cesium.Cartesian3.fromDegrees(positions[i][0], positions[i][1]), new Cesium.Cartesian3())// 定义一个垂直向上的向量uplet up = new Cesium.Cartesian3(0, 0, 10)//得到指向下一个点的向量let right = Cartesian3.subtract(next, now, new Cartesian3())right = Cartesian3.normalize(right, right)let normal = Cartesian3.cross(right, up, new Cartesian3())Cartesian3.normalize(normal, normal)//将法向量进行反向if (this.unionClippingRegions) {Cartesian3.negate(normal, normal)}//由于已经获得了法向量和过平面的一点,因此可以直接构造Plane,并进一步构造ClippingPlanelet planeTmp = Cesium.Plane.fromPointNormal(now, normal)const clipPlane = Cesium.ClippingPlane.fromPlane(planeTmp)clippingPlanes.push(clipPlane)}let the = thisconst clipPlanes = new Cesium.ClippingPlaneCollection({planes: clippingPlanes,edgeWidth: the.edgeColor,edgeColor: the.edgeColor,enabled: the.enabled,unionClippingRegions: the.unionClippingRegions})console.log('clipPlanes', clipPlanes)this.tileSet.clippingPlanes = clipPlanes}removeTilesetClip() {this.tileSet.clippingPlanes.enabled = false}
}
export default tileSetClipByPolygon

使用

this.CeiumPolygonClipA = new CeiumPolygonClip({tileSet: photographyTileset.value,originPositions: clipping,unionClippingRegions: false})this.CeiumPolygonClipA.clippingByPositions(clipping)

CesiumJS 中,ClippingPlaneClippingPlaneCollection 通常用于控制哪些部分的场景或模型是可见的。通过切割面(ClippingPlanes),你可以裁剪或隐藏指定区域的内容。clippingPlanes 主要应用于以下几种对象:

1. 3D Tiles

3D Tiles 是一种用于存储和传输大规模 3D 场景的格式,它可以通过 clippingPlanes 进行裁剪。这是一个非常常见的应用,尤其是在城市建模和大规模场景可视化中。

  • clippingPlanes 可以直接应用于 Cesium3DTileset 对象,以裁剪掉 3D Tiles 模型的一部分。

示例:

const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'path/to/your/3dtiles/tileset.json',clippingPlanes: new Cesium.ClippingPlaneCollection({planes: [new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Z, 100.0)]})
}));

在这个例子中,Cesium3DTileset 会被切割,只显示离 Z 轴 100 单位以内的区域。

2. Primitive(原始几何体)

clippingPlanes 也可以用于 Primitive 对象(如几何体、模型等),这是最基础的 3D 对象类型。通过将 ClippingPlaneCollection 赋值给 Primitive,可以在渲染时裁剪它的几何体。

  • 这种方法适用于自定义的几何体或其他静态几何体,例如:球体、立方体等。

示例:

const sphereGeometry = new Cesium.SphereGeometry({radius: 100.0
});const sphere = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({geometry: sphereGeometry,modelMatrix: Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0, 0.0)),}),appearance: new Cesium.MaterialAppearance({material: Cesium.Material.fromType('Color', {color: Cesium.Color.RED})}),clippingPlanes: new Cesium.ClippingPlaneCollection({planes: [new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Z, 50.0) // 裁剪半径为 50 的球体]})
});viewer.scene.primitives.add(sphere);

在这个例子中,创建了一个球体并将其裁剪,裁剪面距离原点 50 单位,隐藏球体超过该高度的部分。

3. Models(3D 模型)

ClippingPlanes 也可以应用于 3D 模型(如 glTF 模型)。在 Cesium.Model 中,clippingPlanes 可以用来裁剪模型的一部分。

示例:

const model = viewer.scene.primitives.add(Cesium.Model.fromGltf({url: 'path/to/your/model.glb',clippingPlanes: new Cesium.ClippingPlaneCollection({planes: [new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Z, 50.0)]})
}));

这段代码将对加载的 glTF 模型应用切割面,裁剪掉离 Z 轴 50 单位以上的部分。

4. Terrain(地形)

对于 Cesium 中的地形数据(例如使用 3D Tiles 数据源的地形),可以通过切割面进行裁剪。地形通常是通过 Cesium.CesiumTerrainProvider 加载的,而切割面可以用来限制地形的显示。

这种应用场景通常适用于大规模的地形可视化,用户可以通过切割面查看地形的特定部分,或从不同的切割角度进行分析。

5. Imagery(影像图层)

clippingPlanes 还可以用于影像图层,特别是当你想要切割或限制影像图层的显示时。通过使用 clippingPlanes,你可以将某些区域的影像数据裁剪掉,以使其他数据更加突出。

示例:

const imageryLayer = viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url : 'https://your-imagery-url/{z}/{x}/{y}.png'
}));imageryLayer.clippingPlanes = new Cesium.ClippingPlaneCollection({planes: [new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Z, 100.0)]
});

在这个例子中,影像图层会被切割,只显示离 Z 轴 100 单位以内的部分。


其他可能的应用场景:

  1. Skybox(天空盒) clippingPlanes 也可用于裁剪 天空盒,这在某些需要动态裁剪天空内容的应用中有用。

  2. Custom Primitives(自定义原始几何体) 如果你自己创建了自定义几何体,可以通过 clippingPlanes 使其进行裁剪,减少计算负担或者实现特定的可视化效果。

  3. Ground Clipping (地面裁剪) 对于需要动态控制地面显示的场景,clippingPlanes 可以用来裁剪地面,或者将其与其他场景元素进行交互。


总结

ClippingPlanesCesium 中是一个非常灵活的工具,可以应用于以下对象:

  • 3D Tiles(如城市模型)
  • Primitives(如几何体)
  • Models(如 glTF 模型)
  • Terrain(地形)
  • Imagery(影像图层)
  • Skybox(天空盒)
  • Custom Primitives(自定义几何体)

这些对象可以通过 ClippingPlaneCollection 结合多个切割面来实现不同的裁剪效果,从而动态地控制场景中的可见部分。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/480962.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python网络爬虫笔记】2-HTTP协议中网络爬虫需要的请求头和响应头内容

1 HTTP 协议整理 HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;即超文本传输协议&#xff0c;是用于从万维网&#xff08;WWW&#xff09;服务器传输超文本到本地浏览器的传送协议&#xff0c;直白点儿&#xff0c;就是浏览器和服务器之间的数据交互就是通过 HTT…

Echarts散点图(火山图)自定义配置

创建DOM元素 <div><div ref"chat" :style"{width: volcanoDimensions.width,height: volcanoDimensions.height,}" class"chat"></div></div>初始化图表 需要实现&#xff0c;被筛选出的数据&#xff0c;带有label&…

微软企业邮箱:安全可靠的企业级邮件服务!

微软企业邮箱的设置步骤&#xff1f;如何注册使用烽火域名邮箱&#xff1f; 微软企业邮箱作为一款专为企业设计的邮件服务&#xff0c;不仅提供了高效便捷的通信工具&#xff0c;更在安全性、可靠性和功能性方面树立了行业标杆。烽火将深入探讨微软企业邮箱的多重优势。 微软…

33-ESP32-蓝牙篇-00

理解蓝牙技术及其协议栈结构 介绍 在物联网(IoT)领域&#xff0c;蓝牙技术因其低功耗和易用性而成为连接设备的首选无线通信协议之一。ESP32 支持双模蓝牙 4.2&#xff0c;并且已经获得双模蓝牙 4.2 认证和蓝牙 LE 5.0 认证 一、蓝牙技术概述 什么是蓝牙&#xff1f; 蓝牙…

fiddler安卓雷电模拟器配置踩坑篇

一、fiddler端配置 和网页版fiddler一样&#xff0c;需要首先再本机安装证书&#xff0c;可以参考我之前的fiddler浏览器配置文章&#xff0c;前期操作一致&#xff1a; 此处需要注意的是connections里面需要勾选allow remote这个选项&#xff0c;这个主要是为了后来再安卓模拟…

蓝桥杯备赛笔记(一)

这里的笔记是关于蓝桥杯关键知识点的记录&#xff0c;有别于基础语法&#xff0c;很多内容只要求会用就行&#xff0c;无需深入掌握。 文章目录 前言一、编程基础1.1 C基础格式和版本选择1.2 输入输出cin和cout&#xff1a; 1.3 string以下是字符串的一些简介&#xff1a;字符串…

【HarmonyOS NEXT】ACL 受限权限申请

关键词&#xff1a;受限开放权限、ACL、鸿蒙 在鸿蒙应用开发过程中&#xff0c;部分权限被受到限制&#xff08;如悬浮窗开发、读取联系人数据、读取公共目录音频文件等权限&#xff09;&#xff0c;但是在我们的应用开发过程中又不得不使用该权限时可向华为申请受限权限&#…

《安富莱嵌入式周报》第346期:开源2GHz带宽,12bit分辨率,3.2Gsps采样率示波,开源固件安全分析器, 开源口袋电源,开源健康测量,FreeCAD

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频&#xff1a; https://www.bilibili.com/video/BV1TYBhYKECK/ 《安富莱嵌入式周报》第346期&#xff1a;开源2GHz带…

Unity3d C# 摄像头检测敌方单位(目标层级)并在画面中标注(含源码)

前言 需要实现的功能是通过一个专门的检测摄像头将出现在摄像头画面内的敌方单位检测出来&#xff0c;并通过框选的UI框在画面中标记出来。检测摄像头支持自动检测和手动控制检测&#xff0c;同时需要实现锁定模式&#xff0c;检测到一个敌方单位直接锁定到对象上等功能。 效…

【计算机网络】核心部分复习

目录 交换机 v.s. 路由器OSI七层更实用的TCP/IP四层TCPUDP 交换机 v.s. 路由器 交换机-MAC地址 链接设备和设备 路由器- IP地址 链接局域网和局域网 OSI七层 物理层&#xff1a;传输设备。原始电信号比特流。数据链路层&#xff1a;代表是交换机。物理地址寻址&#xff0c;交…

从0在自己机器上部署AlphaFold 3

本文介绍如何在自己本地机器上安装AlphaFold 3。 在10月份&#xff0c;Google DeepMind的首席执行官Demis Hassabis和高级研究科学家John M. Jumper所领导的团队&#xff0c;利用AI技术成功预测了几乎所有已知蛋白质的结构&#xff0c;开发出备受赞誉的AlphaFold&#xff0c;并…

大米中的虫子检测-检测储藏的大米中是否有虫子 支持YOLO,VOC,COCO格式标注,4070张图片的数据集

大米中的虫子检测-检测储藏的大米中是否有虫子 支持YOLO&#xff0c;VOC&#xff0c;COCO格式标注&#xff0c;4070张图片的数据集 数据集分割 4070总图像数 训练组 87&#xff05; 3551图片 有效集 9&#xff05; 362图片 测试集 4% 157图片 预处理 自动定向…

hdlbits系列verilog解答(Exams/m2014 q4a)-86

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 本节学习如何下图中的锁存器电路。 注意图中电路是锁存器,因此quartus会警告说推导出一个锁存器。 模块声明 module top_module ( input d, input ena, output q); 思路: 锁存器是一种对脉冲电平敏感的存储…

关于node全栈项目打包发布linux项目问题总集

1.用pm2部署nest 说明&#xff1a;如果一开始将nest直接打包放到linux服务器上用pm2执行则会报错&#xff0c;这是因为tsconfig.build.tsbuildinfo文件的路径以及相关依赖问题。 报错会为&#xff1a;什么东西找不到.... 所以建议以下为步骤一步一步配置 将整个nest添加压缩包直…

脉冲动画效果

js实现脉冲动画效果&#xff1a; 鼠标点击时&#xff0c;添加动画类&#xff0c;进而实现动画效果&#xff0c;鼠标离开时&#xff0c;移除动画类&#xff0c;回归静态图效果。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UT…

ollama部署bge-m3,并实现与dify平台对接

概述 这几天为了写技术博客,各种组件可谓是装了卸,卸了装,只想复现一些东西,确保你们看到的东西都是可以复现的。 (看在我这么认真的份上,求个关注啊,拜托各位观众老爷了。) 这不,为了实验在windows上docker里运行pytorch,把docker重装了。 dify也得重装: Dify基…

清远榉之乡托养机构探讨:自闭症的本质辨析

当人们谈及自闭症时&#xff0c;常常会产生一个疑问&#xff1a;自闭症是精神类疾病吗&#xff1f;今天&#xff0c;清远榉之乡托养机构就来为大家解开这个疑惑。 榉之乡大龄自闭症托养机构在江苏、广东、江西等地都有分校&#xff0c;一直致力于为大龄自闭症患者提供专业的支持…

Linux自动化部署方法(Linux Automated Deployment Method)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…

【Web】0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单

0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单 html基本骨架语义化标签图片属性a链接 非语义化标签特殊符号标签 列表无序列表结果展示 有序列表结果展示 定义列表结果展示 表格table属性tr属性结果展示 表单单标签form属性input属性selecttextareabu…

ADAM优化算法与学习率调度器:深度学习中的关键工具

深度学习模型的训练效果离不开优化算法和学习率的选择。ADAM&#xff08;Adaptive Moment Estimation&#xff09;作为深度学习领域中广泛应用的优化算法之一&#xff0c;以其高效性和鲁棒性成为许多任务的默认选择。而学习率调度器则是优化算法的“助推器”&#xff0c;帮助训…