cesium-视频融合

在cesium中接入视频，可以将视频设置为实体的材质

实现方法很简单

核心js方法

    /*** 视频融合*/function addVideo() {let videoElement = document.getElementById('daolu');videoElement.play(); //开始播放viewer.showRenderLoopErrors = false;viewer.shouldAnimate = true;viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([118.69418502394004, 32.159565360514364,5,118.69417927065768, 32.15925105645054,5,118.69332107075785, 32.159324857484016,5,118.69142377167259, 32.15924822661176,5,118.69147634063641, 32.15955763658269,5,118.69253911482295, 32.15954400012244,5,118.69324079407022, 32.15954485181277,5,]),material: videoElement, // 将材质设置为video元素clampToGround: true,},});let options = {destination: Cesium.Cartesian3.fromDegrees(118.69270619292732, 32.15943424628025, 500),orientation: {heading: Cesium.Math.toRadians(20), // 水平偏角，默认正北 0pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下roll: 0, // 旋转角},};viewer.camera.setView(options);}

完整代码

<!DOCTYPE html>
<html lang="en"><head><!-- Use correct character set. --><meta charset="utf-8"><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Hello World!</title><script src="../Cesium-1.89/Build/Cesium/Cesium.js"></script><style>@import url(../Cesium-1.89/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#eye {position: absolute;width: 20%;height: 20%;bottom: 0;right: 0;z-index: 999;background: red;border: solid blue 1px;}#show {width: 100%;height: 100%;}</style>
</head><body><div style="display: -webkit-flex;display: flex;width: 100%;height: 100%"><div style="width: 90%;height: 100%"><div id="cesiumContainer"></div></div><div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px"><button onclick="cameraLookAtTransform()">模型定位</button><button onclick="addVideo()">视频融合</button></div>
</div>
<video id="daolu" muted autoplay loop crossorigin controls><source src="../../static/data/daolu.mp4" type="video/mp4"/>
</video>
<script>//Cesium tokenlet cesium_tk = "token";Cesium.Ion.defaultAccessToken = cesium_tk;// 添加mapbox自定义地图实例let layer = new Cesium.MapboxStyleImageryProvider({url: 'https://api.mapbox.com/styles/v1',username: 'sungang',styleId: 'styleId',accessToken: 'accessToken',scaleFactor: true});let viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: layer,geocoder: false,homeButton: false,sceneModePicker: false,baseLayerPicker: false,navigationHelpButton: false,animation: false,timeline: false,fullscreenButton: false,vrButton: false});viewer._cesiumWidget._creditContainer.style.display = "none";let model = new Cesium.Cesium3DTileset({url: '../res/data/3dtiles/tianjie/tileset.json',modelMatrix: Cesium.Matrix4.fromArray([0.9972458032561666, 0.04372029028528979, 0.05991113506964879, 0,-0.03623787897545647, 0.9920229449104262, -0.12073646051879428, 0,-0.06471185374661931, 0.11823287609043515, 0.9908750491338749, 0,-663.0794944260269, 1211.490494620055, 2974.1003134818748, 1]),});let tileset = viewer.scene.primitives.add(model);//模型定位function cameraLookAtTransform() {var boundingSphere = model.boundingSphereviewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(120.0), Cesium.Math.toRadians(-10), boundingSphere.radius * 2.5))viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)}/*** 视频融合*/function addVideo() {let videoElement = document.getElementById('daolu');videoElement.play(); //开始播放viewer.showRenderLoopErrors = false;viewer.shouldAnimate = true;viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([118.69418502394004, 32.159565360514364,5,118.69417927065768, 32.15925105645054,5,118.69332107075785, 32.159324857484016,5,118.69142377167259, 32.15924822661176,5,118.69147634063641, 32.15955763658269,5,118.69253911482295, 32.15954400012244,5,118.69324079407022, 32.15954485181277,5,]),material: videoElement, // 将材质设置为video元素clampToGround: true,},});let options = {destination: Cesium.Cartesian3.fromDegrees(118.69270619292732, 32.15943424628025, 500),orientation: {heading: Cesium.Math.toRadians(20), // 水平偏角，默认正北 0pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下roll: 0, // 旋转角},};viewer.camera.setView(options);}
</script>
</body></html>

实现效果

cesium-视频融合相关推荐

Cesium视频融合
Cesium视频融合效果图效果图详情参见 Cesium实战项目
Cesium 视频融合，边缘模糊
之前做视频投影或者叫视频融合,摄像头视角如果是俯视,就好比路口的监控,就可以直接投影在模型上,甚至拼接也好弄,可是摄像头角度是个问题,如果是平时的角度,投影在地上就会完全变形于是乎就想到了通过分析视 ...
[cesium] | 视频融合 | 基于3dtileset的视频投射插件 | 支持动态调整角度
前言之前仿照火星的视频投射实现类似的功能,今天又用视锥网方式实现了一版 ; 类似可视域的方式将视频纹理贴上去感觉效果一般,没有火星的那种方式效果好:https://blog.csdn.net/wei ...
[cesium] | 视频融合 | 自定义视频投放
仿照火星科技的视频融合写的,感觉贴的视频纹理没有那么亮...应该是改了ShadowMapShader,支持在模型,3dtls上投放. 基于视锥网实现的视频投射插件:传送门效果
Cesium|xt3d视频融合
Cesium|xt3d视频融合效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
WEBGIS开发常用开发功能简介数据处理标绘业务数据可视化视频融合 Cesium EarthSDK
WEBGIS开发总结: 本人2020年测绘工程硕士毕业后就参加了某国企研究所做前端开发了,前端三板斧都是跟着网上的网课一点点学习的,因为本人从事行业的关系,很多项目都跟地图开发相关,比如什么仿真系统/ ...
web三维gis引擎cesium的学习笔记（包含视频融合和动态纹理）
文章目录 web三维gis引擎cesium的学习笔记(包含视频融合和动态纹理) Cesium.Viewer 坐标系位置方向官方api文档及示例 Entity API Primitives API ...
01、开启时空克隆之旅 C++三维视频融合实战系列(时空克隆)
几年来,在数字孪生的概念指引下,各行各业的三维可视化项目蓬勃发展,政府也实时提出了打造实景三维中国的目标. 相比于数字孪生,时空克隆有什么不同吗?单从字面意思来讲,什么是孪生?孪生就是我们俗称的双胞胎 ...
H5视频会议，直播，通话，教学，支持Webrtc、rtmp、sip、rtsp转协议、IPCAM、白板、桌面共享、免插件、web全平台、视频融合系统研发笔记。...
随着互联网深入,视频互通互联的需求越来越多,近些年国家要进一步发展5G网络,手机等设备硬件也越来越好,对视频互通性,及时性,便捷性提出了新的需求. 1,H5-WEB接入,全平台web通用: a.在针对 ...
关于图像融合视频融合
图像融合视频融合怎么把一张小尺寸图片贴进大尺寸图片里面呢怎么把一个长和宽小的视频贴进长和宽大点的视频之中呢下面有两种方法,直接融合和泊松融合直接融合图像直接融合 %%图像直接融合 clea ...

cesium-视频融合

cesium-视频融合

核心js方法

完整代码

实现效果

cesium-视频融合相关推荐

最新文章

热门文章