转载 https://blog.csdn.net/A873054267/article/details/86239025
实现原理:
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)
});