首先，视频作为融合素材需要在服务端经过一些降噪、裁剪、调色等处理，然后生成视频流输出到浏览器端；前端的视频展示需要处理视频与三维场景之间的空间位置关系，从而实现在三维实景模型或地形上上投射视频画面。在视频投射的情况下，根据摄像机镜头的角度，可能会出现一些画面的部分落在地面上，而另一些部分则在半空中。这种情况通常取决于摄像机的视角和地形的形状。在 Cesium 中，如果您将视频投射到地球表面或地形模型上，画面可能会根据地形的高度和摄像机的角度而有所不同。如果摄像机位于较低的位置，并且倾斜角度较大，那么画面的一部分可能会在地面上。反之，如果摄像机位于较高的位置，并且倾斜角度较小，那么画面可能会更多地显示在半空中。代码主框架 `import FrustumEditor from './FrustumEditor.js' import VideoScreen from './VideoScreen.js' import * as dat from 'dat.gui' const Cesium = window.Cesium let viewer = null export default { data(){ }, async mounted (){ await this.init() }, methods: { async init (){ `*`// 创建Cesium的查看器`*` this.initViewer() `*`// 加载3DTiles图层`*` await this.init3DTilesLayer() `*`// 创建视锥`*` this.initFrustum() `*`// 创建视频画面幕布`*` this.initVideoMesh() this.initGUI() `*`// 鼠标交互`*` this.initMouseInteract() }, } } ` 创建Cesium的查看器和三维图层 initViewer () { const container = this.$refs.cesiumContainer viewer = new Cesium.Viewer(container, { timeline: true, animation: true, sceneModePicker: true, baseLayerPicker: true, infoBox: true, *// 打开自带详情弹窗* shouldAnimate: true *// 允许播放动画* }) *// 停止时间的进度* viewer.clock.shouldAnimate = false *// 开启光照* viewer.scene.globe.depthTestAgainstTerrain = true viewer.scene.light = new Cesium.SunLight({ color: Cesium.Color.WHITE, intensity: 5.0 }) } */\*\* \* 加载3D建筑图层 \* @returns {Promise<void>} \*/* async init3DTilesLayer () { const tileset = await Cesium.Cesium3DTileset.fromUrl( sourceMap.lingshan.src, *//3dTiles入口文件地址* {} ) viewer.scene.primitives.add(tileset) *// 调整图层高度* const translation = this.getTransformMatrix(tileset, { x: 0, y: 0, z: -5 }) tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation) }, 创建视锥编辑器示例 initFrustum () { *// 初始化视锥* const frustumOptions = sourceMap.videoPOI[this.cameraId] const { frustum, cameraView } = frustumOptions *// 切换视锥配置参数* for (const k in frustum) { this.guiControl[k] = frustum[k] } *// 切换镜头* viewer.camera.setView({ destination: cameraView.position, orientation: { direction: cameraView.direction, up: cameraView.up, right: cameraView.right } }) *// 创建视锥体编辑器* this.frustum = new FrustumEditor({ viewer, options: this.guiControl }) } 视锥编辑器类 */\*\* \* 视锥编辑器 \*/* class FrustumEditor { */\*\* \* @typedef {Object} Options 视锥体配置参数 \* @property {number} [lng=113.50929592055162] 轴心的经度值 \* @property {number} [lat=22.774823711975543] 轴心的纬度值 \* @property {number} [height=10] 轴心的高度 \* @property {number} [heading=0] 相机的方向角 \* @property {number} [pitch=0] 相机的俯仰角 \* @property {number} [roll=0] 相机的翻滚角 \* @property {number} [fov=30] 相机的视场角 \* @property {number} [near=0.1] 相机的近裁剪面 \* @property {number} [far=30] 相机的远裁剪面 \* @property {number} [aspectRatio=1.2] 相机的宽高比 \*/* options = { lng: 113.50929592055162, lat: 22.774823711975543, height: 10, heading: 0, pitch: 0, roll: 0, fov: 30, near: 0.1, far: 30, aspectRatio: 1.2 } *// 场景查看器* viewer = null *// 视锥体图元实例* instance = null */\*\* \* 构造函数 \* @param config {Object} \* @param config.viewer {Cesium.Viewer} 场景查看器 \* @param config.options {Object} 视锥体参数配置 \*/* constructor (config) { const { viewer, options } = config if (!viewer || !options) { console.error('Missing required parameters when new FrustumEditor') return } *// 配置参数覆盖默认值* for (const key in this.options) { this.options[key] = options[key] } this.viewer = viewer this.create() } */\*\* \* 修改配置参数 \* @param name \* @param newValue \*/* setOption (name, newValue) { if (this.options.hasOwnProperty(name)) { this.options[name] = newValue } } */\*\* \* 创建新的实例 \*/* create () { const { viewer } = this *// 视锥体方向参数* const { lng, lat, height, heading, pitch, roll, fov, near, far, aspectRatio } = this.options *// 轴心位置* const position = Cesium.Cartesian3.fromDegrees(lng, lat, height) *// 朝向姿态* const hpr = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll) ) *// 透视的视锥体类型* const frustum = new Cesium.PerspectiveFrustum({ fov: Cesium.Math.toRadians(fov), aspectRatio, near, far }) *// 将相对于局部坐标系的位置和方向转换为相对于固定坐标系的位置和方向* const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'east') *// 获得相对于大地图的转置矩阵* const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame( position, hpr, Cesium.Ellipsoid.WGS84, fixedFrameTransform ) *// 视锥体轮廓* const geometry = new Cesium.FrustumOutlineGeometry({ frustum, origin: Cesium.Cartesian3.ZERO, *// 默认值* orientation: Cesium.Quaternion.IDENTITY, *// 默认值* vertexFormat: Cesium.VertexFormat.POSITION_ONLY }) *// 几何实例对象* const instanceGeo = new Cesium.GeometryInstance({ geometry, id: 'FrustumGeometry', attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor( new Cesium.Color(1.0, 1.0, 1.0, 0.8) ) } }) *// 在地图中创建视椎体图元* const primitive = new Cesium.Primitive({ geometryInstances: [instanceGeo], modelMatrix, *// 控制位置和朝向* releaseGeometryInstances: false, *// 渲染后不释放geometryInstances* appearance: new Cesium.PerInstanceColorAppearance({ closed: true, flat: true }), asynchronous: false *// 非异步构建* }) viewer.scene.primitives.add(primitive) this.instance = primitive *// 给图元加上自定义属性，以方便被检索* primitive.customType = '_frustumEditor' } */\*\* \* 清除实例 \*/* clear () { const { viewer } = this viewer.scene.primitives._primitives.filter(item => { return item.customType === '_frustumEditor' }).forEach(item => { viewer.scene.primitives.remove(item) }) this.instance = null } */\*\* \* 更新视锥编辑器 \*/* update () { this.clear() this.create() } */\*\* \* 获取视锥体远端面顶点坐标 \* @param drawPoint {Boolean} 是否绘制顶点到地图 \* @return {Array} \*/* getCorners (drawPoint = false) { if (this.instance == null) { return [] } const primitive = this.instance *// 获取 primitive 的几何体实例* const instanceGeo = primitive.geometryInstances[0] *// 获取几何体实例的几何体对象, 关键！* const geometry = Cesium.FrustumOutlineGeometry.createGeometry(instanceGeo.geometry) *// 获取几何体的顶点属性* const attributes = geometry.attributes *// 获取顶点属性中的位置属性* const positions = attributes.position.values *// 获取图元转置矩阵* const modelMatrix = primitive.modelMatrix *// 清空顶点几何体* *// this.clearSphere()* const resultArr = [] *// 前4个顶点刚好为远端面顶点* for (let i = 3 \* 4; resultArr.length < 4; i += 3) { *// 创建顶点坐标的 Cartesian4 对象* const x = positions[i] const y = positions[i + 1] const z = positions[i + 2] const vertex = new Cesium.Cartesian4(x, y, z, 1.0) *// 应用模型矩阵到顶点坐标* Cesium.Matrix4.multiplyByPoint(modelMatrix, vertex, vertex) *// 将顶点坐标转换为地理坐标* const cartesian3 = Cesium.Cartesian3.fromCartesian4(vertex) const cartographic = Cesium.Cartographic.fromCartesian(cartesian3) resultArr.push(cartographic) } return resultArr } */\*\* \* 显示或隐藏视锥 \* @param targetVal {Boolean} \*/* toggle (targetVal) { const { viewer } = this viewer.scene.primitives._primitives.filter(item => { return item.customType === '_frustumEditor' }).forEach(item => { item.show = typeof targetVal === 'boolean' ? targetVal : !item.show }) } } export default FrustumEditor 创建视频画面幕布 initVideoMesh () { const { stRotation } = this.guiControl *// video里包含了src视频地址和name摄像头安装地址* const { video } = sourceMap.videoPOI[this.cameraId] this.videoScreen = new VideoScreen({ viewer, options: { src: video.src, stRotation *// 视频画面的旋转角度* } }) } 视频画面幕布类 */\*\* \* 视频幕布 \*/* class VideoScreen { *// 视频标签* videoElement = null viewer = null *// 投射多边形* curMesh = null */\*\* \* @typedef {Object} Options 视频幕布配置参数 \* @property {String} src 视频源地址 \* @property {Array} [positions=[]]] 视频幕布几何体顶点坐标 \* @property {number} [stRotation=90.0] 几何体纹理的旋转角度 \* @property {Boolean} [tapGround=false] 几何体是否完全贴地 \*/* options = { src: '', positions: [], stRotation: 0.0, tapGround: false } constructor (config) { const { viewer, options } = config if (!viewer || !options) { console.error('Missing required parameters when new FrustumEditor') return } this.viewer = viewer for (const key in options) { this.setOption(key, options[key]) } this.init() } init () { const { viewer } = this const { src, tapGround, positions, stRotation } = this.options *// 创建视频元素* const videoElement = document.createElement('video') videoElement.src = src videoElement.loop = true videoElement.muted = true videoElement.autoplay = true videoElement.preload = 'auto' videoElement.addEventListener('canplaythrough', function () { *// 视频可以播放时触发的逻辑* videoElement.play() }) this.videoElement = videoElement *// 创建Polygon* const mesh = viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy(positions), material: videoElement, stRotation: Cesium.Math.toRadians(stRotation), perPositionHeight: !tapGround *// 启用每个位置的高度* } }) this.curMesh = mesh } */\*\* \* 设置纹理旋转角度 \* @param {Number} value 角度值 \*/* setStRotation (value) { this.curMesh.polygon.stRotation = Cesium.Math.toRadians(value) } */\*\* \* 设置属性值 \* @param {String} name \* @param {\*} value \*/* setOption (name, value) { if (this.options.hasOwnProperty(name)) { this.options[name] = value } } */\*\* \* 改变姿态 \* @param positions {Array} 新的顶点坐标 \*/* transform (positions) { if (this.curMesh) { *// 更新VideoPolygon的顶点* this.curMesh.polygon.hierarchy = new Cesium.PolygonHierarchy(positions) } } */\*\* \* 获取地球面与线的交点 \* @param p1 {lng,lat,height} 线的起点 \* @param p2 {lng,lat,height} 线的终点 \* @return {null|\*} \*/* getInterPointByLine (p1, p2) { const { viewer } = this const startPoint = p1 instanceof Cesium.Cartographic ? p1 : Cesium.Cartographic.fromDegrees(p1.lng, p1.lat, p1.height) *// 替换为起点的经纬度和高度* const endPoint = p2 instanceof Cesium.Cartographic ? p2 : Cesium.Cartographic.fromDegrees(p2.lng, p2.lat, p2.height) *// 替换为终点的经纬度和高度* *// 创建起点和终点的笛卡尔坐标* const startCartesian = viewer.scene.globe.ellipsoid.cartographicToCartesian(startPoint) const endCartesian = viewer.scene.globe.ellipsoid.cartographicToCartesian(endPoint) *// 通过原点和方向创建射线* const direction = Cesium.Cartesian3.subtract(endCartesian, startCartesian, new Cesium.Cartesian3()) const ray = new Cesium.Ray(startCartesian, direction) *// 计算射线与地球表面的交点* const result = Cesium.IntersectionTests.rayEllipsoid(ray, viewer.scene.globe.ellipsoid) if (result && result.start !== result.stop) { *// 计算交点的位置* console.log(\`start ${result.start}, stop ${result.stop}\`) const intersectionPoint = Cesium.Ray.getPoint(ray, result.start) *// 将交点的笛卡尔坐标转换为地理坐标* const intersectionCartographic = Cesium.Cartographic.fromCartesian(intersectionPoint) return intersectionCartographic } else { console.log(\`该方向上无交点 ${p1}, ${p2}\`) return null } } */\*\* \* 显示隐藏 \* @param targetVal {Boolean} \*/* toggle (targetVal) { const { curMesh } = this if (curMesh) { curMesh.show = typeof targetVal === 'boolean' ? targetVal : !curMesh.show } } } export default VideoScreen 初始参数配置面板与视锥参数关联 *// 参数设置控件* initGUI () { this.gui = new dat.GUI() const { guiControl, gui } = this const folder1 = gui.addFolder('视锥', { closed: false }) folder1.open() folder1.add(guiControl, 'heading', -180, 180).step(0.1).onChange((value) => { this.frustum.setOption('heading', value) this.updateFrustum() }) folder1.add(guiControl, 'pitch', -180, 180).step(0.1).onChange((value) => { this.frustum.setOption('pitch', value) this.updateFrustum() }) folder1.add(guiControl, 'roll', -180, 180).step(0.1).onChange((value) => { this.frustum.setOption('roll', value) this.updateFrustum() }) folder1.add(guiControl, 'fov', 1, 120).onChange((value) => { this.frustum.setOption('fov', value) this.updateFrustum() }) folder1.add(guiControl, 'near', 0.1, 10).onChange((value) => { this.frustum.setOption('near', value) this.updateFrustum() }) folder1.add(guiControl, 'far', 1, 200).onChange((value) => { this.frustum.setOption('far', value) this.updateFrustum() }) folder1.add(guiControl, 'aspectRatio', 0.5, 2.0).step(0.001).onChange((value) => { this.frustum.setOption('aspectRatio', value) this.updateFrustum() }) folder1.add(guiControl, 'enablePick').name('拾取坐标').onChange((value) => { console.log(\`${value ? '开启' : '关闭'}拾取坐标\`) }) folder1.add(guiControl, 'height', 0, 100).name('原点高度').onChange((value) => { this.frustum.setOption('height', value) this.updateFrustum() }) folder1.add(guiControl, 'stRotation', -180, 180,).name('镜头旋转').onChange((value) => { this.frustum.setOption('stRotation', value) this.videoScreen.setStRotation(value) }) folder1.add(guiControl, 'useGroundInsert').name('使用地面交点').onChange((value) => { this.updateFrustum() }) }, updateFrustum () { this.frustum.update() *// 获取视锥体的远端顶点* const corners = this.frustum.getCorners() *// 初始化视频幕布* if (!this.videoScreen) { this.initVideoMesh() } *// 更新视频幕布的顶点，从而改变它的姿态* this.updateVideoMesh(corners) }, *// 创建视频融合面* initVideoMesh () { const { stRotation } = this.guiControl const { video } = sourceMap.videoPOI[this.cameraId] this.videoScreen = new VideoScreen({ viewer, options: { src: video.src, stRotation } }) }, *// 调整视频幕布的姿态* updateVideoMesh (frustumCorners) { *// 绘制视锥与地面交点* const { lng, lat, height, useGroundInsert, drawVertex } = this.guiControl let interPoints = [] if (useGroundInsert) { console.log('useGroundInsert') *// 1.使用与地面的交点作为新顶点* frustumCorners.forEach(corner => { *// 检测视锥4条边线与地面的交点* const interPoint = this.getInterPointByLine({ lng, lat, height }, corner) if (interPoint) { interPoints.push(interPoint) } }) } else { *// 2.使用视锥的远端点作为新顶点* interPoints = [...frustumCorners] } console.log(interPoints) *// 绘制顶点* this.clearSphere() if (drawVertex) { interPoints.forEach(cartographic => { this.drawSphere(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height, 6) }) } if (this.videoScreen) { const newPositions = interPoints.map(cartographic => { return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height) }) *// 更新VideoPolygon的顶点* this.videoScreen.transform(newPositions) } } 实现镜头之间的跳转获取目标摄像机C1的视频资源地址、视锥参数Params1、用户镜头视角等将当前视角按照Params1的参数做变换，包括移动位置、朝向等等以变换后的视锥为基础，变换视频幕布VideoScreen，调整幕布的顶点位置、纹理旋转角度将用户镜头移动到目标摄像机C1的视角位置，让视频画面与场景画面叠加融合 */\*\* \* 移动到指定的摄像头视锥 \* @param id {String} 设备id \*/* flyToCamera (id) { *// 1. 获取到目标摄像机的用户视角、视频资源、视锥参数* const { cameraView, video, frustum } = sourceMap.videoPOI[id] *// 隐藏视频* this.toggleVideoMesh(true) *// 更新视锥几何参数* for (const key in frustum) { const newValue = frustum[key] this.guiControl[key] = newValue this.frustum.setOption(key, newValue) } *// 2. 变化视锥* *// 3. 变换视频幕布VideoScree* this.updateFrustum() *// 3. 更新视频资源* if (this.videoScreen) { this.videoScreen.videoElement.pause() this.videoScreen.videoElement.src = video.src this.videoScreen.setStRotation(frustum.stRotation) } *// 4. 镜头过度到设备的视角* viewer.camera.flyTo({ destination: cameraView.position, orientation: { direction: cameraView.direction, up: cameraView.up, right: cameraView.right }, complete: () => { *// 隐藏视锥，显示视频幕布* this.toggleFrustum(false) this.toggleVideoMesh(true) } }) },

在Cesium上实现视频投射

vip888

首先，视频作为融合素材需要在服务端经过一些降噪、裁剪、调色等处理，然后生成视频流输出到浏览器端；前端的视频展示需要处理视频与三维场景之间的空间位置关系，从而实现在三维实景模型或地形上上投射视频画面。

在视频投射的情况下，根据摄像机镜头的角度，可能会出现一些画面的部分落在地面上，而另一些部分则在半空中。这种情况通常取决于摄像机的视角和地形的形状。

在 Cesium 中，如果您将视频投射到地球表面或地形模型上，画面可能会根据地形的高度和摄像机的角度而有所不同。如果摄像机位于较低的位置，并且倾斜角度较大，那么画面的一部分可能会在地面上。反之，如果摄像机位于较高的位置，并且倾斜角度较小，那么画面可能会更多地显示在半空中。

代码主框架


   `import FrustumEditor from './FrustumEditor.js'
   import VideoScreen from './VideoScreen.js'
   import * as dat from 'dat.gui'
   const Cesium = window.Cesium
   let viewer = null
   

   export default {
      data(){
      },
      async mounted (){
          await this.init()
      },
      methods: {
          async init (){
             `*`// 创建Cesium的查看器`*`
             this
此内容 登录 或 注册 后可见