上一节我们学习了:cesium编写着色器实现建筑物渐变特效今天我们要学习的是cesium编写着色器实现滚动光环特效。
动态效果
实例代码
// 导入 Cesium 对象
import * as Cesium from "cesium";
// 定义并导出一个函数 modifyBuild,接受一个 viewer 参数。
export default function modifyBuild(viewer) {
// 使用 Cesium 的 createOsmBuildings 函数来添加 3D 建筑模型。
let tiles3d = new Cesium.createOsmBuildings();
// 将 3D 建筑添加到 viewer 场景中,并获取该对象的引用。
const osmBuildings = viewer.scene.primitives.add(tiles3d);
// 添加一个事件监听器,监听瓦片是否可见(即被加载进来)。
tiles3d.tileVisible.addEventListener(function (tile) {
// 获取瓦片内容。
const cesium3DTileCon = tile.content;
// 获取瓦片内部的特征(features)数量。
const featuresLength = cesium3DTileCon.featuresLength;
// 循环遍历所有的特征。
for (let i = 0; i < featuresLength; i++) {
// 获取单个特征(例如,一个建筑)并访问其模型内容。
const model = cesium3DTileCon.getFeature(i).content._model;
// 修改该模型的片元着色器。
const fragmentShaderSource =
(model._rendererResources.sourceShaders[1] = `
varying vec3 v_positionEC;
void main()
{
czm_materialInput materialInput;
// 转换模型的位置信息到视图坐标。
vec4 position = czm_inverseModelView * vec4(v_positionEC, 1.0);
// 根据高度设置渐变颜色。
float strength = position.z/200.0;
gl_FragColor = vec4(strength,0.3*strength,strength, 1.0);
}
`);
// 片元着色器已被修改,设置标志以便重新生成着色器。
model._shouldRegenerateShaders = true;
}
});
}
实例演示地址
当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesium编写着色器实现滚动光环特效-实践的学习笔记
实例代码下载
代码运行环境:vue3 + vite + js nodejs 14