【cesium】水面动态上涨下跌且带有动态水面材质

原创已于 2023-05-18 08:44:21 修改 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架

于 2022-06-11 06:34:23 首次发布

cesium学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在Cesium中实现水面动态材质的方法，通过封装WaterPrimitive类，独立出exhight属性并提供grow函数，实现水体高度的动态增长或降低。代码示例详细展示了如何创建和更新水体几何，并使用requestAnimationFrame实现平滑动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先感谢该文章作者提供的代码
https://blog.csdn.net/qq_39142804/article/details/122825831?utm_source=app&app_version=5.3.1
本文是在其基础上做了部分完善，由于entity没有水面动态材质，primitive的exhight无法使用property的形式进行改变，因此独立出该primitive 将exhight属性抛出可以动态修改

原文中的水面上涨是通过类外部的函数执行的，我添加了grow函数，进一步让代码封装独立化
代码：
import * as Cesium from “cesium”;
import movingRiver from “@/assets/images/map/water_normals.jpg”;
export class WaterPrimitive {
constructor(options) {
this._positions = options.positions;
this._height = options.height;
this._extrudedHeight = options.extrudedHeight;
this._targetHeight = Cesium.defaultValue(options.targetHeight, options.extrudedHeight);
this._grow = Cesium.defaultValue(options.grow, false);
this._upGrow = Cesium.defaultValue(options.upGrow, true);
this.init();
}
}
Object.defineProperties(WaterPrimitive.prototype, {
extrudedHeight: {
get() {
return this._extrudedHeight;
},
set(newVal) {
if (Object.prototype.toString.call(newVal) !== “[object Number]”) return;
if (this._primitive) {
this._primitive._state = 3;
this._primitive._appearance = undefined;
this._primitive.geometryInstances.geometry = this.getGeometry();
this._extrudedHeight = newVal;
}
}
}
});
WaterPrimitive.prototype.getGeometry = function () {
return new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(this._positions)),
height: this._height,
extrudedHeight: this._extrudedHeight,
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
});
};
WaterPrimitive.prototype.update = function (frameState) {
if (this._primitive) {
let primitive = this._primitive;
primitive.update(frameState);
}
};

WaterPrimitive.prototype.destroy = function () {
let primitive = this._primitive;
primitive.destroy()
}

WaterPrimitive.prototype.init = function () {
let geometry = this.getGeometry();
if (!geometry) return;
this._primitive = new Cesium.Primitive({
releaseGeometryInstances: false,
geometryInstances: new Cesium.GeometryInstance({
geometry
}),
asynchronous: false,
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: new Cesium.Material({
fabric: {
type: “Water”,
uniforms: {
baseWaterColor: new Cesium.Color(0 / 255.0, 255 / 255.0, 237 / 255.0, 0.1),
normalMap: movingRiver,
frequency: 1000.0,
animationSpeed: 0.1,
amplitude: 10,
specularIntensity: 10
}
}
}),

	})
});
if (this._grow) {
	this.grow();
}

};
WaterPrimitive.prototype.grow = function () {
if (this._upGrow) {
if (this.extrudedHeight < this._targetHeight) {
this.extrudedHeight += 0.01;
Cesium.requestAnimationFrame(() => this.grow());
}
} else {
if (this.extrudedHeight > this._targetHeight) {
this.extrudedHeight -= 0.01;
Cesium.requestAnimationFrame(() => this.grow());
}
}
}
Cesium.WaterPrimitive = WaterPrimitive;