实现原理:
html中声明一个vedio元素来承载视频,但是不必设置元素的宽高,然后再js中获取该元素,并把该元素赋值给一个实体的材质
此种方式适用于primitve方式加载的,官网的是加载到模型上,此后再做研究。
html中:
<video id="trailer" style="display: none" controls loop preload="auto" autoplay="autoplay" > <source src="video/xc2.MP4" type="video/mp4"> </video>
js中:
//首先获取到视频元素
var videoElement = document.getElementById('trailer'); //在cesium中创建一个模型来承载视频,使得视频可以在该处进行播放 var pArray = [ 116.34453261995247, 39.996079774527296, 14.546905094954552, 116.34453261396283, 39.99601663806494, 14.526901883324383 ]; var instance = new Cesium.GeometryInstance({ geometry: new Cesium.WallGeometry({ positions: Cesium.Cartesian3.fromDegreesArrayHeights(pArray), minimumHeights: [10.740020872891446, 10.740020872891446] }) }); //将该材质设置为视频,并给与模型 var material = Cesium.Material.fromType('Image'); material.uniforms.image = videoElement; var tileset=viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: instance, appearance: new Cesium.MaterialAppearance({ closed: false, material: material }) })) //移动镜头至模型处 viewer.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(116.34453261995247, 39.996079774527296,300) });