Cesium 视频投射

2024-08-23 07:52
文章标签 视频 cesium 投射

本文主要是介绍Cesium 视频投射，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Cesium 视频投射

话不多说，直接上代码

        var options = {horizontalViewAngle: 60,verticalViewAngle: 40,video: "video_dom",viewPosition: Cesium.Cartesian3.fromDegrees(85.788705, 45.161394, 900),viewPositionEnd: Cesium.Cartesian3.fromDegrees(85.788705, 45.167394, 500),};v = new video(viewer, options);v.drawVideo();// 播放video_dom.play();// 暂停// video_dom.pause();// 清除// new video(viewer, {}).clearAll();

// video.js
var videos = [];
var video_dom;
var getCurrentMousePosition = function (scene, position, noPickEntity) {var cartesian;var pickedObject = scene.pick(position);if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {var entity = pickedObject.id;if (noPickEntity == null || (noPickEntity && entity !== noPickEntity)) {var cartesian = scene.pickPosition(position);if (Cesium.defined(cartesian)) {var cartographic = Cesium.Cartographic.fromCartesian(cartesian);var height = cartographic.height;if (height >= 0) return cartesian;if (!Cesium.defined(pickedObject.id) && height >= -500)return cartesian;}}}if (scene.mode === Cesium.SceneMode.SCENE3D) {var pickRay = scene.camera.getPickRay(position);cartesian = scene.globe.pick(pickRay, scene);} else {cartesian = scene.camera.pickEllipsoid(position, scene.globe.ellipsoid);}return cartesian;
}class video {constructor(viewer, config) {this.viewer = viewer;this.config = config;}creat() {var viewer = this.viewer;var config = this.config;var videoElement = config.videoElement;var positions = config.positions;var clampToGround = config.clampToGround;if (clampToGround) {viewer.entities.add({nam: "video",polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),material: videoElement}});} else {viewer.entities.add({nam: "video",polygon: {hierarchy: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions)},material: videoElement,perPositionHeight: true,outline: true}});}}clearAll() {var dd = viewer.entities._entities._array;for (let index = 0; index < dd.length; index++) {if (dd[index]._nam = "video") {viewer.entities.remove(dd[index])index--;}}videos.forEach((v) => {v.destroy();})}change(object) {var _this = this;for (const key in object) {const element = object[key];_this.lightCamera.frustum[key] = element;_this.clear()_this.drawFrustumOutline();}}drawVideo() {let _self = this;var options = this.config;this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);this.horizontalViewAngle = options.horizontalViewAngle || 60.0;this.verticalViewAngle = options.verticalViewAngle || 40.0;video_dom = document.getElementById(options.video);this.options = options;this.posArray = [];this.state = "PREPARE";if (options.viewPosition && options.viewPositionEnd) {_self.viewPosition = options.viewPosition;_self.viewPositionEnd = options.viewPositionEnd;_self.viewDistance = Cesium.Cartesian3.distance(_self.viewPosition, _self.viewPositionEnd);_self.viewHeading = getHeading(_self.viewPosition, _self.viewPositionEnd);_self.viewPitch = getPitch(_self.viewPosition, _self.viewPositionEnd);_self.createLightCamera();} else {this.action();}}action() {let _self = this;_self.handler.setInputAction(function (movement) {var cartesian = getCurrentMousePosition(_self.viewer.scene, movement.position);if (!cartesian) {return;}if (_self.posArray.length == 0) {_self.posArray.push(cartesian);_self.state = "OPERATING";} else if (_self.posArray.length == 1) {_self.viewPosition = _self.posArray[0];_self.viewPositionEnd = cartesian;_self.viewDistance = Cesium.Cartesian3.distance(_self.viewPosition, _self.viewPositionEnd);_self.viewHeading = getHeading(_self.viewPosition, _self.viewPositionEnd);_self.viewPitch = getPitch(_self.viewPosition, _self.viewPositionEnd);_self.state = "END";_self.handler.destroy();_self.handler = null;_self.createLightCamera();}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);}//创建相机createLightCamera() {this.lightCamera = new Cesium.Camera(this.viewer.scene);this.lightCamera.position = this.viewPosition;this.lightCamera.frustum.near = this.viewDistance * 0.0001;this.lightCamera.frustum.far = this.viewDistance;const hr = Cesium.Math.toRadians(this.horizontalViewAngle);const vr = Cesium.Math.toRadians(this.verticalViewAngle);const aspectRatio =(this.viewDistance * Math.tan(hr / 2) * 2) /(this.viewDistance * Math.tan(vr / 2) * 2);this.lightCamera.frustum.aspectRatio = aspectRatio;if (hr > vr) {this.lightCamera.frustum.fov = hr;} else {this.lightCamera.frustum.fov = vr;}this.lightCamera.setView({destination: this.viewPosition,orientation: {heading: Cesium.Math.toRadians(this.viewHeading || 0),pitch: Cesium.Math.toRadians(this.viewPitch || 0),roll: 0}});this.drawFrustumOutline();}//创建视锥线drawFrustumOutline() {const scratchRight = new Cesium.Cartesian3();const scratchRotation = new Cesium.Matrix3();const scratchOrientation = new Cesium.Quaternion();const position = this.lightCamera.positionWC;const direction = this.lightCamera.directionWC;const up = this.lightCamera.upWC;let right = this.lightCamera.rightWC;right = Cesium.Cartesian3.negate(right, scratchRight);let rotation = scratchRotation;Cesium.Matrix3.setColumn(rotation, 0, right, rotation);Cesium.Matrix3.setColumn(rotation, 1, up, rotation);Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);var newObj = _.cloneDeep(this.lightCamera.frustum);newObj.near = newObj.far - 0.01;var videoGeometryInstance1 = new Cesium.GeometryInstance({geometry: new Cesium.FrustumGeometry({frustum: newObj,origin: this.viewPosition,orientation: orientation})});var p1s = new Cesium.Primitive({geometryInstances: [videoGeometryInstance1],appearance: createAppearance()})this.viewer.scene.primitives.add(p1s);var videoGeometryInstance2 = new Cesium.GeometryInstance({geometry: new Cesium.FrustumOutlineGeometry({frustum: this.lightCamera.frustum,origin: this.viewPosition,orientation: orientation}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)}});var p2s = new Cesium.Primitive({geometryInstances: [videoGeometryInstance2],appearance: new Cesium.PerInstanceColorAppearance({flat: true,// translucent : false})})this.viewer.scene.primitives.add(p2s);this.FrustumGeometry = p1s;this.FrustumOutlineGeometry = p2s;videos.push(p1s)videos.push(p2s)}clear() {this.FrustumGeometry.destroy()this.FrustumOutlineGeometry.destroy()}
}//获取偏航角
function getHeading(fromPosition, toPosition) {let finalPosition = new Cesium.Cartesian3();let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);Cesium.Matrix4.inverse(matrix4, matrix4);Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);Cesium.Cartesian3.normalize(finalPosition, finalPosition);return Cesium.Math.toDegrees(Math.atan2(finalPosition.x, finalPosition.y));
}//获取俯仰角
function getPitch(fromPosition, toPosition) {let finalPosition = new Cesium.Cartesian3();let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);Cesium.Matrix4.inverse(matrix4, matrix4);Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);Cesium.Cartesian3.normalize(finalPosition, finalPosition);return Cesium.Math.toDegrees(Math.asin(finalPosition.z));
}

html 部分

    <script src="./video.js"></script><script src="./turf.min.js"></script><script src="./lodash.min.js"></script><video id="video_dom" preload="auto" autoPlay loop><source src="./video.mp4" type="video/mp4" /></video>
``### 效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b09f790a49e74d1d87479e31957aa468.png#pic_center)

这篇关于Cesium 视频投射的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1098789。

相关文章

Java如何获取视频文件的视频时长

Java如何获取视频文件的视频时长

《Java如何获取视频文件的视频时长》文章介绍了如何使用Java获取视频文件的视频时长,包括导入maven依赖和代码案例,同时,也讨论了在运行过程中遇到的SLF4J加载问题,并给出了解决方案... 目录Java获取视频文件的视频时长1、导入maven依赖2、代码案例3、SLF4J: Failed to lo
阅读更多...
Python实现多路视频多窗口播放功能

Python实现多路视频多窗口播放功能

《Python实现多路视频多窗口播放功能》这篇文章主要为大家详细介绍了Python实现多路视频多窗口播放功能的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下... 目录一、python实现多路视频播放功能二、代码实现三、打包代码实现总结一、python实现多路视频播放功能服务端开
阅读更多...
Python实现视频转换为音频的方法详解

Python实现视频转换为音频的方法详解

《Python实现视频转换为音频的方法详解》这篇文章主要为大家详细Python如何将视频转换为音频并将音频文件保存到特定文件夹下,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. python需求的任务2. Python代码的实现3. 代码修改的位置4. 运行结果5. 注意事项
阅读更多...
Python视频处理库VidGear使用小结

Python视频处理库VidGear使用小结

《Python视频处理库VidGear使用小结》VidGear是一个高性能的Python视频处理库,本文主要介绍了Python视频处理库VidGear使用小结,文中通过示例代码介绍的非常详细,对大家的... 目录一、VidGear的安装二、VidGear的主要功能三、VidGear的使用示例四、VidGea
阅读更多...
流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台，是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力，在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术，能够处理多种视频流格式，并以多种格式（RTMP、RTSP、HTTP-FLV、WebS
阅读更多...
综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
《x86汇编语言：从实模式到保护模式》视频来了

《x86汇编语言：从实模式到保护模式》视频来了

《x86汇编语言：从实模式到保护模式》视频来了 很多朋友留言，说我的专栏《x86汇编语言：从实模式到保护模式》写得很详细，还有的朋友希望我能写得更细，最好是覆盖全书的所有章节。 毕竟我不是作者，只有作者的解读才是最权威的。 当初我学习这本书的时候，只能靠自己摸索，网上搜不到什么好资源。 如果你正在学这本书或者汇编语言，那你有福气了。 本书作者李忠老师，以此书为蓝本，录制了全套视频。 试
阅读更多...
SAM2POINT：以zero-shot且快速的方式将任何 3D 视频分割为视频

SAM2POINT：以zero-shot且快速的方式将任何 3D 视频分割为视频

摘要 我们介绍 SAM2POINT，这是一种采用 Segment Anything Model 2 (SAM 2) 进行零样本和快速 3D 分割的初步探索。 SAM2POINT 将任何 3D 数据解释为一系列多向视频，并利用 SAM 2 进行 3D 空间分割，无需进一步训练或 2D-3D 投影。 我们的框架支持各种提示类型，包括 3D 点、框和掩模，并且可以泛化到不同的场景，例如 3D 对象、室
阅读更多...
树莓派5_opencv笔记27：Opencv录制视频（无声音）

树莓派5_opencv笔记27：Opencv录制视频（无声音）

今日继续学习树莓派5 8G：（Raspberry Pi，简称RPi或RasPi）  本人所用树莓派5 装载的系统与版本如下:  版本可用命令 (lsb_release -a) 查询: Opencv 与 python 版本如下： 今天就水一篇文章，用树莓派摄像头，Opencv录制一段视频保存在指定目录... 文章提供测试代码讲解，整体代码贴出、测试效果图 目录 阶段一：录制一段
阅读更多...
基于树梅派的视频监控机器人Verybot

基于树梅派的视频监控机器人Verybot

最近这段时间做了一个基于树梅派 ( raspberry pi ) 的视频监控机器人平台 Verybot ，现在打算把这个机器人的一些图片、视频、设计思路进行公开，并且希望跟大家一起研究相关的各种问题，下面是两张机器人的照片：         图片1：                   图片2                    这个平台的基本组成是：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2