• 核心代码
• 引入video、创建几何图形

纹理坐标

需要运行在Cesium1.74版本以下

核心代码

var PrimitiveTexture = (
	function () {
		var vertexShader;
		var fragmentShader;
		var materialShader;
		var video;
		var viewer;
		// var positionArr;
		// var sts;
		// var indiceArr;
		function _(options) {
			
			vertexShader = getVS();
			fragmentShader = getFS();
			materialShader = getMS();
			video = options.video;
			viewer = options.viewer;
			var postionsTemp = [];
			//纹理坐标，调整纹理坐标顺序即可完成贴图的旋转
			var stsTemp = [0, 0, 0, 1, 1, 1, 1, 0];
			//索引数组
			var indicesTesm = [0, 1, 2, 0, 2, 3];

			for (var i = 0; i < options.Cartesians.length; i++) {
				postionsTemp.push(options.Cartesians[i].x);
				postionsTemp.push(options.Cartesians[i].y);
				postionsTemp.push(options.Cartesians[i].z);
			}
			console.log("pos:" + postionsTemp)
			// console.log("posArr: " + new Float32Array(postionsTemp));

			// this.positionArr = new Float32Array(postionsTemp);
			this.positionArr = new Float32Array(postionsTemp);
			this.sts = new Uint8Array(stsTemp);
			this.indiceArr = new Uint16Array(indicesTesm);
			//通过坐标数组，索引数组，纹理坐标数组创建多边形
			this.geometry = CreateGeometry(this.positionArr, this.sts, this.indiceArr);
			this.appearance = CreateAppearence(fragmentShader, vertexShader, materialShader, video);
			
			this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
				geometryInstances: new Cesium.GeometryInstance({
					geometry: this.geometry,
				}),
				appearance: this.appearance,
				asynchronous: false
			}));
		}

		function CreateGeometry(positions, sts, indices) {
			let sess = new Cesium.GeometryAttribute({
				componentDatatype: Cesium.ComponentDatatype.FLOAT,
				componentsPerAttribute: 2,
				values: sts
			})
			return new Cesium.Geometry({
				attributes: {
					position: new Cesium.GeometryAttribute({
						componentDatatype: Cesium.ComponentDatatype.DOUBLE,
						componentsPerAttribute: 3,
						values: positions
					}),
					st: sess
				},
				indices: indices,
				primitiveType: Cesium.PrimitiveType.TRIANGLES,
				boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
			});
		}


		function CreateAppearence(fs, vs, ms, video) {
			function NewMaterial() {
				var material = new Cesium.Material({
					fabric: {
						type: 'myImage',
						uniforms: {
							image: ""
						},
						source: ms
					}
				});
				material.uniforms.image = video;
				return material;
			}

			return new Cesium.Appearance({
				material: NewMaterial(),
				aboveGround: true,
				faceForward: true,
				flat: true,
				translucent: false,
				renderState: {
					blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
					depthTest: { enabled: true },
					depthMask: true,
				},
				fragmentShaderSource: fs,
				vertexShaderSource: vs
			});
		}

		function getVS() {
			return `
				attribute vec3 position3DHigh;
				attribute vec3 position3DLow;
				attribute vec3 normal;
				attribute vec2 st;
				attribute float batchId;

				varying vec3 v_positionEC;
				varying vec3 v_normalEC;
				varying vec2 v_st;

				void main()
				{
				vec4 p = czm_computePosition();

				v_positionEC = (czm_modelViewRelativeToEye * p).xyz;      // position in eye coordinates
				v_normalEC = czm_normal * normal;                         // normal in eye coordinates
				v_st = st;

				gl_Position = czm_modelViewProjectionRelativeToEye * p;
				}
	`
		}
		function getFS() {
			return "varying vec2 v_st;\
            void main()\
            {\
                czm_materialInput materialInput;\
                czm_material material=czm_getMaterial(materialInput,v_st);\
                vec4 color=vec4(material.diffuse + material.emission,material.alpha);\
                if(color.x == 1.0&&color.y == 1.0&&color.z == 1.0&&color.w == 1.0) color=vec4(vec3(0.0,0.0,0.0),0.0);\
                gl_FragColor =color;\
            }\
            ";
		}
		function getMS() {
			return "czm_material czm_getMaterial(czm_materialInput materialInput,vec2 v_st)\
            {\
                vec4 color = texture2D(image, v_st);\
                czm_material material = czm_getDefaultMaterial(materialInput);\
                material.diffuse = color.rgb;\
                material.alpha = color.a;\
                return material;\
            }\
            ";
		}
		return _;
	})()

引入video、创建几何图形

<video id="myVideo" style="display: none;" autoplay muted loop>
    <source src="video.mp4" type="video/mp4" />
</video>

const videoElement = document.getElementById('myVideo');

var huaDanPositions = new Float64Array([
    113.12450312602019, 27.652619992158165,
    113.1247820429295, 27.65383601117469,
    113.12528811307428, 27.653715168039135,
    113.12495367448567, 27.652615464327322,
    113.12450312602019, 27.652619992158165
])
var cartesian3Positions = Cesium.Cartesian3.fromDegreesArray(huaDanPositions);
var geometry = new PrimitiveTexture({
    video: videoElement,
    Cartesians: cartesian3Positions,
    viewer: viewer
});