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 中,ClippingPlane
和 ClippingPlaneCollection 通常用于控制哪些部分的场景或模型是可见的。通过切割面(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 单位以内的部分。
其他可能的应用场景:
-
Skybox(天空盒)
clippingPlanes
也可用于裁剪 天空盒,这在某些需要动态裁剪天空内容的应用中有用。 -
Custom Primitives(自定义原始几何体) 如果你自己创建了自定义几何体,可以通过
clippingPlanes
使其进行裁剪,减少计算负担或者实现特定的可视化效果。 -
Ground Clipping (地面裁剪) 对于需要动态控制地面显示的场景,
clippingPlanes
可以用来裁剪地面,或者将其与其他场景元素进行交互。
总结
ClippingPlanes
在 Cesium 中是一个非常灵活的工具,可以应用于以下对象:
- 3D Tiles(如城市模型)
- Primitives(如几何体)
- Models(如 glTF 模型)
- Terrain(地形)
- Imagery(影像图层)
- Skybox(天空盒)
- Custom Primitives(自定义几何体)
这些对象可以通过 ClippingPlaneCollection
结合多个切割面来实现不同的裁剪效果,从而动态地控制场景中的可见部分。
相关文章:

cesium 3dtile ClippingPlanes 多边形挖洞ClippingPlaneCollection
原理就是3dtiles里面的属性clippingPlanes 采用ClippingPlaneCollection,构成多边形来挖洞。 其次就是xyz法向量挖洞 clippingPlanes: new this.ffCesium.Cesium.ClippingPlaneCollection({unionClippingRegions: true, // true 表示多个切割面能合并为一个有效的…...
docker 僵尸进程问题
docker僵尸进程 子进程结束后,父进程没有回收该进程资源(父进程可能没有wait),子进程残留资源存放与内核中,就变为僵尸进程(zombie) 场景分析:python脚本A中执行B应用,将A部署在docker中&#…...

微软要求 Windows Insider 用户试用备受争议的召回功能
拥有搭载 Qualcomm Snapdragon 处理器的 Copilot PC 的 Windows Insider 计划参与者现在可以试用 Recall,这是一项臭名昭著的快照拍摄 AI 功能,在今年早些时候推出时受到了很多批评。 Windows 营销高级总监 Melissa Grant 上周表示:“我们听…...

husky,commit规范,生成CHANGELOG.md,npm发版
项目git提交工程化(钩子,提交信息commit message),npm修改版本,需要涉及到的包: husky,允许在git钩子中执行不同的脚步,如commitlint,eslint,prettier&#…...
DETR:一种新颖的端到端目标检测与分割框架
DETR:一种新颖的端到端目标检测与分割框架 摘要: 随着深度学习技术的发展,目标检测和图像分割任务取得了显著的进步。然而,传统的基于区域提名的方法在处理这些问题时存在一定的局限性。为此,Facebook AI Research&am…...

前端js面试知识点思维导图(脑图)
如果看着不清晰可以去https://download.csdn.net/download/m0_73761441/90058523访问下载,无需积分 使用百度脑图制作,可以一键导入下面的文本生成自己的脑图 js相关面试题、知识点 数据类型 1. 数据类型分类?分别包含ÿ…...

【Java基础入门篇】一、变量、数据类型和运算符
Java基础入门篇 一、变量、数据类型和运算符 1.1 变量 计算机中的数据表示方式是:“二进制(0/1)”,但是同时也可以兼容其他进制,例如八进制、十进制、十六进制等。 Java变量的本质是:存储在固定空间的内容,变量名是…...
【llamafactory】安装与环境配置
拉取镜像 git clone --depth 1 https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory创建虚拟环境 conda create -n llamafactory python3.10 conda activate llamafactory安装所需依赖 pip install -e ".[torch,vllm,optimum,auto_gptq]"...
Vue 3 + Vuex 埋点实现指南
在现代前端开发中,数据分析和用户行为追踪是不可或缺的部分。本文将介绍如何在 Vue 3 项目中实现埋点功能,具体使用 Vuex 进行状态管理,并通过自定义 Hook 实现埋点逻辑。 目录 项目结构实现埋点逻辑使用埋点功能总结 1.项目结构 我们将创…...

电子应用设计方案-30:智能扫地机器人系统方案设计
智能扫地机器人系统方案设计 一、引言 随着人们生活节奏的加快和对生活品质的追求,智能家居产品越来越受到消费者的青睐。智能扫地机器人作为一种能够自动清扫地面的智能设备,为人们节省了大量的时间和精力。本方案旨在设计一款功能强大、智能化程度高、…...

HTML飞舞的爱心(完整代码)
写在前面 HTML语言实现飞舞的爱心完整代码。 完整代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>飞舞爱心</title><style>* {margin: 0;padding: 0;}html,body {overflow: hidd…...
android shader gl_Position是几个分量
在Android的OpenGL ES中,gl_Position是顶点着色器(Vertex Shader)的一个内置输出变量,它用于指定顶点在裁剪空间(Clip Space)中的位置。gl_Position是一个四维向量(4-component vectorÿ…...

spine 动画层 动态权重
前奏.业务背景 这边想实现一个功能,项目中有 一只猫 猫的头会盯着逗猫棒移动。因为素材还没到所以这里使用了 spine 自带的猫头鹰。他的动画 刚好挺有针对性:(关联上篇)https://blog.csdn.net/nicepainkiller/article/details/144…...

《Python基础》之Python中可以转换成json数据类型的数据
目录 一、JSON简介 JSON有两种基本结构 1、对象(Object) 2、数组(Array) 二、将数据装换成json数据类型方法 三、在Python中,以下数据类型可以直接转换为JSON数据类型 1、字典(Dictionary)…...
在oracle下载jdk显示400 Bad Request Request Header Or Cookie Too Large
下载JDK17,官网地址:【https://www.oracle.com/cn/java/technologies/downloads/#jdk17-windows】 问题: 出现 400 Bad Request: Request Header Or Cookie Too Large 错误,通常是由于浏览器存储的 Cookies 或请求头过大所导致的…...
MongoDB注入攻击测试与防御技术深度解析
MongoDB注入攻击测试与防御技术深度解析 随着NoSQL数据库的兴起,MongoDB作为其中的佼佼者,因其灵活的数据模型和强大的查询能力,受到了众多开发者的青睐。然而,与任何技术一样,MongoDB也面临着安全威胁,其…...
【Java基础入门篇】前言
Java基础入门篇 本系列内容主要针对Java基础知识,总共包含四大部分内容: 变量、数据类型和运算符控制语句和递归算法面向对象和JVM底层分析数组和排序 学习需要具备: IDEA编译器 JDK1.8版本 写在前面 在Java入门的最开始,我们需…...
Oracle 建表的存储过程
建表的存储过程 下面是建表的存储过程,用途:通过不同的表,根据不同过滤条件,得到某个字段,例如neid,然后创建一个新表T,表T的表名为拼接XXXX_XXX_neid,表T的字段自行添加 xxx&…...

【Debug】hexo-github令牌认证 Support for password authentication was removed
title: 【Debug】hexo-github令牌认证 date: 2024-07-19 14:40:54 categories: bug解决日记 description: “Support for password authentication was removed on August 13, 2021.” cover: https://pic.imgdb.cn/item/669b38ebd9c307b7e9f3e5e0.jpg 第一章 第一篇博客记录一…...
torch.is_floating_point(input)
torch.is_floating_point(input) input: 输入张量 如果输入的数据类型是 浮点数据类型 ,则返回 True。否则返回False。 浮点数据类型:torch.float64、torch.float32、torch.float16 、 torch.bfloat16 import torch# 创建一个浮点数张量 float_tensor torch.te…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...

srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...

k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...

回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...

springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...