Cesium 3dtiles 渐变特效 vite-plugin-cesium版

源码

// An highlighted block
import * as Cesium from "cesium";
const viewer = ref(null);
const tileset = ref(null);
tileset.value = viewer.value.scene.primitives.add(
			new Cesium.Cesium3DTileset({
				// url: "http://192.168.1.18:9003/model/t2N4u5bBr/tileset.json",
				url: "3dtiles/tileset.json",
			}),
		);
		tileset.value.readyPromise.then((tile) => {
			//定位
			let boundingSphere = tile.boundingSphere;
			viewer.value.camera.viewBoundingSphere(
				boundingSphere,
				new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-45), boundingSphere.radius * 3),
			);
			viewer.value.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
			//更改着色器代码
			tile.tileVisible.addEventListener(function (res) {
				let content = res.content;
				let featuresLength = content.featuresLength;
				for (let i = 0; i < featuresLength; i += 2) {
					let feature = content.getFeature(i);
					let model = feature.content._model;
					if (model && model._pipelineResources) {
						let program = model._pipelineResources[1];
						const color = `vec4(0,127.5/255.,1.,1.)`;
						program._fragmentShaderSource.sources[0] = `
							uniform vec2 model_iblFactor;
							uniform mat3 model_iblReferenceFrameMatrix;
							uniform float model_luminanceAtZenith;
							uniform float u_metallicFactor;
							uniform float u_roughnessFactor;
							uniform int model_featuresLength;
							uniform sampler2D model_batchTexture;
							uniform vec4 model_textureStep;
							uniform float model_colorBlend;
							uniform bool model_commandTranslucent;
							uniform sampler2D model_pickTexture;
							varying vec3 v_positionWC;
							varying vec3 v_positionEC;
							varying vec3 v_normalEC;
							varying vec3 v_positionMC;
							varying float v_featureId_0;
							struct SelectedFeature
							{
								int id;
								vec2 st;
								vec4 color;
							};
							struct FeatureIds
							{
								int featureId_0;
							};
							vec2 computeSt(float featureId)
							{
								float stepX = model_textureStep.x;
								float centerX = model_textureStep.y;

								#ifdef MULTILINE_BATCH_TEXTURE
								float stepY = model_textureStep.z;
								float centerY = model_textureStep.w;

								float xId = mod(featureId, model_textureDimensions.x); 
								float yId = floor(featureId / model_textureDimensions.x);
								
								return vec2(centerX + (xId * stepX), centerY + (yId * stepY));
								#else
								return vec2(centerX + (featureId * stepX), 0.5);
								#endif
							}
							void selectedFeatureIdStage(out SelectedFeature feature, FeatureIds featureIds)
							{   
								int featureId = featureIds.SELECTED_FEATURE_ID;
								if (featureId < model_featuresLength)
								{
									vec2 featureSt = computeSt(float(featureId));

									feature.id = featureId;
									feature.st = featureSt;
									feature.color = texture2D(model_batchTexture, featureSt);
								}
								else
								{
									feature.id = model_featuresLength + 1;
									feature.st = vec2(0.0);
									feature.color = vec4(1.0);
								}

								#ifdef HAS_NULL_FEATURE_ID
								if (featureId == model_nullFeatureId) {
									feature.id = featureId;
									feature.st = vec2(0.0);
									feature.color = vec4(1.0);
								}
								#endif
							}
							SelectedFeature selectedFeature;
							void main(){
								vec4 position = czm_inverseModelView * vec4(v_positionEC,1.);//获取模型的世界坐标
								float buildMaxHeight = 300.0;//建筑群最高高度 配渐变色
								gl_FragColor = ${color};//赋予基础底色
								gl_FragColor *= vec4(vec3(position.y / buildMaxHeight ), 1.0);//根据楼层高度比例渲染渐变色
								float time = abs(fract(czm_frameNumber / 360.0)-0.5)*2.;//动画频率 约束在(0,1) 更改频率修改360.0
								float diffuse = step(0.005, abs(clamp(position.y / buildMaxHeight, 0.0, 1.0) - time));//根据帧数变化,光圈颜色白色,由底部朝上一丢丢(0.05)开始逐渐上移显现.
								gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diffuse );//单纯叠加颜色 感兴趣的可以mix混合下
							}
						`;
					}
				}
			});
		});

结语

着色器程序和源的位置变了，适当修改即可。注意点:cesiumlab2和3切的3dtiles要带光照，其次cesumlab2 矢量楼快切的高度方向向量为v_positionEC.z,cesiumlab3通用模型切的高度方向为v_positionEC.y。