lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

qzc-dev
秦子超 2025-11-21 09:49:24 +08:00
parent 53d1961a3b
commit 3b2a1445c7
4 changed files with 428 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/data/json/czml3.json Normal file
View File

File diff suppressed because one or more lines are too long

0
public/data/json/czml4.json Normal file
View File

2
src/views/Home/MapCtrl/Map3D/Map3D.js
View File

@ -357,6 +357,8 @@ export default class Map3D extends BaseMap {
// this.demo.getCzml2(viewer) //demo
// demo.getWater(viewer)//水面
// this.demo.getWater3(viewer)
// this.demo.getWater4(viewer)
// this.demo.getWAter5(viewer)
// demo.getTool(viewer)//工具
// await this.demo.getWater2(viewer,[

450
src/views/Home/MapCtrl/Map3D/demo.js
View File

@ -258,57 +258,121 @@ export default class LayerMgr {
//全村的希望
async getWater3(viewer) {
// baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 1), // 水的基本颜色
// normalMap: normalMap,
// // normalMap: Cesium.buildModuleUrl(
// // `${process.env.PUBLIC_URL}/models/waternormals.jpg`
// // ),
// frequency: 1000.0,
// animationSpeed: 0.01,
// amplitude: 10,
// specularIntensity: 1, // 镜面反射强度
const simpleWaterMaterial = new Cesium.Material({
fabric: {
type: 'FixedWater',
type: 'AdvancedWater',
uniforms: {
color: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 1),
highlightColor: new Cesium.Color(0.5, 0.8, 1.0, 1),
speed: 0.01,
// frequency: 50.0
frequency: 1000.0,
animationSpeed: 0.01,
amplitude: 10,
specularIntensity: 1, // 镜面反射强度
baseWaterColor: new Cesium.Color(0.2, 0.4, 0.7, 0.85),
specularColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
reflectionColor: new Cesium.Color(0.3, 0.6, 0.9, 1.0),
smallWaveSpeed: 0.05,
bigWaveSpeed: 0.02,
smallWaveFrequency: 800.0,
bigWaveFrequency: 200.0,
waveAmplitude: 5.0,
foamThreshold: 0.4,
time: 0.0
},
source:
`
source: `
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
// 2D噪声函数
float noise2D(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
// 分形噪声
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise2D(p * frequency);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
float time = czm_frameNumber * speed;
vec2 st = materialInput.st * 3.0;
float time = czm_frameNumber * 0.005;
// 创建多层波纹
float wave1 = sin(st.x * frequency * 2.0 + st.y * frequency + time) * 0.4;
float wave2 = cos(st.x * frequency * 1.5 - st.y * frequency * 1.2 + time * 1.7) * 0.3;
float wave3 = sin(st.x * frequency * 3.0 + st.y * frequency * 0.8 + time * 0.6) * 0.2;
// 大波浪 - 主要形状
float bigWave1 = sin(st.x * bigWaveFrequency + time * bigWaveSpeed) *
cos(st.y * bigWaveFrequency * 0.7 + time * bigWaveSpeed * 1.3);
float combinedWave = (wave1 + wave2 + wave3) / 3.0;
float bigWave2 = cos(st.x * bigWaveFrequency * 0.8 - st.y * bigWaveFrequency * 1.2 +
time * bigWaveSpeed * 0.7) * 0.7;
// 颜色混合 - 基础色与高光色
vec3 waterColor = mix(color.rgb, highlightColor.rgb,
abs(combinedWave) * 2.0);
// 小波浪 - 细节
float smallWave1 = fbm(vec2(st.x * smallWaveFrequency + time,
st.y * smallWaveFrequency)) * 0.5;
// 透明度变化
float alpha = color.a * (0.6 + combinedWave * 0.4);
float smallWave2 = fbm(vec2(st.x * smallWaveFrequency * 1.7 - time * 0.7,
st.y * smallWaveFrequency * 1.3)) * 0.3;
material.diffuse = waterColor;
material.alpha = alpha;
material.specular = 0.7 + combinedWave * 0.3;
material.shininess = 50.0; // 增加光泽度
// 组合波浪
float totalWave = (bigWave1 * 0.6 + bigWave2 * 0.4 +
smallWave1 * 0.3 + smallWave2 * 0.2) * waveAmplitude;
// 计算法线 - 使用波浪梯度
vec2 eps = vec2(0.001, 0.0);
float h1 = sin((st.x + eps.x) * bigWaveFrequency + time) *
cos(st.y * bigWaveFrequency * 0.7 + time);
float h2 = sin(st.x * bigWaveFrequency + time) *
cos((st.y + eps.x) * bigWaveFrequency * 0.7 + time);
vec3 normal = normalize(vec3(h1 - totalWave, h2 - totalWave, 1.0));
// 基于法线的光照计算
vec3 lightDir = czm_sunDirectionEC;
float diffuse = max(dot(normal, lightDir), 0.0);
// 高光计算
vec3 viewDir = vec3(0.0, 0.0, 1.0); // 简化视角方向
vec3 halfDir = normalize(lightDir + viewDir);
float specular = pow(max(dot(normal, halfDir), 0.0), 120.0) * 1.5;
// 泡沫生成 - 基于波浪陡度
float foam = smoothstep(foamThreshold, 1.0, abs(totalWave));
// 深度效果 - 模拟浅水和深水
float depthEffect = 1.0 - smoothstep(0.0, 1.0, st.y);
vec3 deepWaterColor = baseWaterColor.rgb * 0.7;
vec3 shallowWaterColor = baseWaterColor.rgb * 1.3;
vec3 waterBase = mix(deepWaterColor, shallowWaterColor, depthEffect);
// 颜色混合
vec3 diffuseColor = waterBase * (diffuse * 0.6 + 0.4);
vec3 specularColor = specularColor.rgb * specular;
vec3 foamColor = mix(diffuseColor, vec3(1.0), foam * 0.3);
// 最终颜色
material.diffuse = foamColor + specularColor;
// 透明度 - 边缘更透明
float edgeAlpha = 1.0 - smoothstep(0.0, 0.2, min(min(st.x, st.y), min(1.0-st.x, 1.0-st.y)));
material.alpha = baseWaterColor.a * (0.9 - edgeAlpha * 0.3);
// 材质属性
material.normal = normal;
material.specular = min(specular * 2.0, 1.0);
material.shininess = 100.0;
return material;
}
@ -401,6 +465,152 @@ export default class LayerMgr {
waterPrimitive2.show = true
}
getWater4(viewer) {
const realisticWaterMaterial = new Cesium.Material({
fabric: {
type: 'AdvancedWater',
uniforms: {
baseWaterColor: new Cesium.Color(0.2, 0.4, 0.7, 0.85),
specularColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
reflectionColor: new Cesium.Color(0.3, 0.6, 0.9, 1.0),
smallWaveSpeed: 0.05,
bigWaveSpeed: 0.02,
smallWaveFrequency: 1000.0,
bigWaveFrequency: 100.0,
waveAmplitude: 0.5,
foamThreshold: 0.2,
time: 0.0
},
source: `
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
// 2D噪声函数
float noise2D(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
// 分形噪声
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise2D(p * frequency);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st * 3.0;
float time = czm_frameNumber * 0.005;
// 大波浪 - 主要形状
float bigWave1 = sin(st.x * bigWaveFrequency + time * bigWaveSpeed) *
cos(st.y * bigWaveFrequency * 0.7 + time * bigWaveSpeed * 1.3);
float bigWave2 = cos(st.x * bigWaveFrequency * 0.8 - st.y * bigWaveFrequency * 1.2 +
time * bigWaveSpeed * 0.7) * 0.7;
// 小波浪 - 细节
float smallWave1 = fbm(vec2(st.x * smallWaveFrequency + time,
st.y * smallWaveFrequency)) * 0.5;
float smallWave2 = fbm(vec2(st.x * smallWaveFrequency * 1.7 - time * 0.7,
st.y * smallWaveFrequency * 1.3)) * 0.3;
// 组合波浪
float totalWave = (bigWave1 * 0.6 + bigWave2 * 0.4 +
smallWave1 * 0.3 + smallWave2 * 0.2) * waveAmplitude;
// 计算法线 - 使用波浪梯度
vec2 eps = vec2(0.001, 0.0);
float h1 = sin((st.x + eps.x) * bigWaveFrequency + time) *
cos(st.y * bigWaveFrequency * 0.7 + time);
float h2 = sin(st.x * bigWaveFrequency + time) *
cos((st.y + eps.x) * bigWaveFrequency * 0.7 + time);
vec3 normal = normalize(vec3(h1 - totalWave, h2 - totalWave, 1.0));
// 基于法线的光照计算
vec3 lightDir = czm_sunDirectionEC;
float diffuse = max(dot(normal, lightDir), 0.0);
// 高光计算
vec3 viewDir = vec3(0.0, 1.0, 0.0); // 简化视角方向
vec3 halfDir = normalize(viewDir);
float specular = pow(max(dot(normal, halfDir), 0.0), 120.0) * 1.5;
// 泡沫生成 - 基于波浪陡度
float foam = smoothstep(foamThreshold, 1.0, abs(totalWave));
// 深度效果 - 模拟浅水和深水
float depthEffect = 1.0 - smoothstep(0.0, 1.0, st.y);
vec3 deepWaterColor = baseWaterColor.rgb * 0.7;
vec3 shallowWaterColor = baseWaterColor.rgb * 1.3;
vec3 waterBase = mix(deepWaterColor, shallowWaterColor, depthEffect);
// 颜色混合
vec3 diffuseColor = waterBase * (diffuse * 0.6 + 0.4);
vec3 specularColor = specularColor.rgb * specular;
vec3 foamColor = mix(diffuseColor, vec3(1.0), foam * 0.3);
// 最终颜色
material.diffuse = foamColor + specularColor;
// 透明度 - 边缘更透明
float edgeAlpha = 1.0 - smoothstep(0.0, 0.2, min(min(st.x, st.y), min(1.0-st.x, 1.0-st.y)));
material.alpha = baseWaterColor.a * (0.9 - edgeAlpha * 0.3);
// 材质属性
material.normal = normal;
material.specular = min(specular * 2.0, 1.0);
material.shininess = 100.0;
return material;
}
`
}
});
// 创建水面Primitive
const waterPrimitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArrayHeights([
114.76352489831815,31.494754219571522,80,114.76520120583086,31.4999564874016,80,114.76980240861486,31.498491685970183,80,114.77288986029524,31.499291609035314,80,114.7752374682663,31.497030189270138,80,114.77496372060254,31.49482620567726,80,114.77471997997016,31.490858103316754,80,114.77276936030704,31.48685100847121,80,114.77069081826704,31.483979297273798,80,114.76965049062629,31.48370282132599,80,114.76441718716531,31.48255871323312,80,114.76372798131092,31.47900692403831,80,114.76293736420705,31.477822176429328,80,114.75120596797079,31.471419526420515,80,114.75038568642819,31.469139708715907,80,114.74958949458313,31.46814991520691,80,114.74789070463534,31.468121367311053,80,114.7471786876506,31.466373139201135,80,114.74930655086952,31.461932951570883,80,114.74805372401946,31.458130678122178,80,114.7445797538948,31.45414539792457,80,114.73993504386465,31.45124971272249,80,114.73636690633312,31.452374249551728,80,114.73813467149844,31.456832583528676,80,114.74095195126414,31.460165343908727,80,114.74011304826205,31.464062436365865,80,114.73995399997894,31.46681589187651,80,114.74014787758605,31.470080972179417,80,114.74046551608743,31.47381704756393,80,114.74421736191424,31.47792376112243,80,114.7520809314138,31.483752378529545,80,114.7580325301891,31.49028179289772,80,114.76385167039098,31.493196679385143,80
])
),
extrudedHeight: 0.1,
perPositionHeight: true,
vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
})
}),
appearance: new Cesium.MaterialAppearance({
material: realisticWaterMaterial,
translucent: true
}),
show:true,
});
viewer.scene.primitives.add(waterPrimitive);
}
async getQxsy(viewer) {
try {
let tileset = await Cesium.Cesium3DTileset.fromUrl(
@ -1732,5 +1942,169 @@ export default class LayerMgr {
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
viewer.clock.shouldAnimate = false; // 暂停动画
}
async getWAter5(viewer) {
const realisticWaterMaterial = new Cesium.Material({
fabric: {
type: 'AdvancedWater',
uniforms: {
baseWaterColor: new Cesium.Color(0.2, 0.4, 0.7, 0.85),
specularColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
reflectionColor: new Cesium.Color(0.3, 0.6, 0.9, 1.0),
smallWaveSpeed: 0.5,
bigWaveSpeed: 0.2,
smallWaveFrequency: 1000.0, // 调整频率以适应世界坐标
bigWaveFrequency: 1000.0, // 调整频率以适应世界坐标
waveAmplitude: 1.0,
foamThreshold: 1.0,
time: 0.0
},
source: `
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
// 2D噪声函数
float noise2D(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
// 分形噪声
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise2D(p * frequency);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
// 获取世界坐标 - 使用正确的方法
vec4 worldPosition = czm_inverseModelView * vec4(materialInput.positionToEyeEC, 1.0);
vec3 worldPos = worldPosition.xyz;
// 使用世界坐标的x和z分量（忽略y分量，因为水面是水平的）
vec2 worldCoord = worldPos.xz / 100000.0; // 缩放以适应波浪频率
// 使用系统时间，确保所有Primitive使用相同的时间
float time = czm_frameNumber * 0.005;
// 大波浪 - 主要形状
float bigWave1 = sin(worldCoord.x * bigWaveFrequency + time * bigWaveSpeed) *
cos(worldCoord.y * bigWaveFrequency * 0.7 + time * bigWaveSpeed * 1.3);
float bigWave2 = cos(worldCoord.x * bigWaveFrequency * 0.8 - worldCoord.y * bigWaveFrequency * 1.2 +
time * bigWaveSpeed * 0.7) * 0.7;
// 小波浪 - 细节
float smallWave1 = fbm(vec2(worldCoord.x * smallWaveFrequency + time,
worldCoord.y * smallWaveFrequency)) * 0.5;
float smallWave2 = fbm(vec2(worldCoord.x * smallWaveFrequency * 1.7 - time * 0.7,
worldCoord.y * smallWaveFrequency * 1.3)) * 0.3;
// 组合波浪
float totalWave = (bigWave1 * 0.6 + bigWave2 * 0.4 +
smallWave1 * 0.3 + smallWave2 * 0.2) * waveAmplitude;
// 计算法线 - 使用波浪梯度
vec2 eps = vec2(0.001, 0.0);
float h1 = sin((worldCoord.x + eps.x) * bigWaveFrequency + time) *
cos(worldCoord.y * bigWaveFrequency * 0.7 + time);
float h2 = sin(worldCoord.x * bigWaveFrequency + time) *
cos((worldCoord.y + eps.x) * bigWaveFrequency * 0.7 + time);
vec3 normal = normalize(vec3(h1 - totalWave, h2 - totalWave, 1.0));
// 基于法线的光照计算
vec3 lightDir = czm_sunDirectionEC;
float diffuse = max(dot(normal, lightDir), 0.0);
// 高光计算
vec3 viewDir = normalize(materialInput.positionToEyeEC);
vec3 reflectDir = reflect(-lightDir, normal);
float specular = pow(max(dot(viewDir, reflectDir), 0.0), 120.0) * 1.5;
// 泡沫生成 - 基于波浪陡度
float foam = smoothstep(foamThreshold, 1.0, abs(totalWave));
// 使用固定的水颜色，不再依赖纹理坐标
vec3 waterBase = baseWaterColor.rgb;
// 颜色混合
vec3 diffuseColor = waterBase * (diffuse * 0.6 + 0.4);
vec3 specularColor = specularColor.rgb * specular;
vec3 foamColor = mix(diffuseColor, vec3(1.0), foam * 0.3);
// 最终颜色
material.diffuse = foamColor + specularColor;
// 固定的透明度
material.alpha = baseWaterColor.a;
// 材质属性
material.normal = normal;
material.specular = min(specular * 2.0, 1.0);
material.shininess = 100.0;
return material;
}
`
}
});
const { czml } = await fetch(`${process.env.PUBLIC_URL}/data/json/czml3.json`)
.then(resp => resp.json())
.then(data => data)
.catch(() => []);
const waterPrimitiveList = czml.map((item,index)=>{
// 创建水面Primitive
const waterPrimitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArrayHeights(
item.cartographicDegrees
)
),
extrudedHeight: 0.1,
perPositionHeight: true,
vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
})
}),
appearance: new Cesium.MaterialAppearance({
material: realisticWaterMaterial,
translucent: true
}),
show:index===false,
});
waterPrimitive.id = 'myWater_'+index
viewer.scene.primitives.add(waterPrimitive)
return waterPrimitive
})
await this.sleep(2000)
for(let i = 0; i < waterPrimitiveList.length; ++i) {
const item = waterPrimitiveList[i]
if(i>0){
waterPrimitiveList[i-1].show = false
}
item.show = true
await this.sleep(2000)
}
}
}