supermap iclient3d for cesium场景加载雨雪效果，并加载相应材质

首先新建一个文件夹来存放材质，我选择src/assets/MaterialJson

snow.json,复制粘贴,雨雪用一个就行了

{"material": {"id": "DA82AFCB-129A-4E66-995A-9F519894F58D","cullMode": "none","alphaMode": "opaque","alphaCutoff": 0.009999999776482582,"vertexShaderName": "","fragmentShaderName": "","pbrMetallicRoughness": {"emissiveFactor": { "x": 0.0, "y": 0.0, "z": 0.0 },"emissiveTextureIndex": -1,"emissiveTextureCoordIndex": -1,"emissiveTextureMotion": {"OffsetSpeedU": 0.0,"OffsetSpeedV": 0.0,"OffsetPeriod": 0.0,"TilingSpeedU": 1.0,"TilingSpeedV": 1.0,"TilingPeriod": 0.0},"normalTextureIndex": -1,"normalTextureCoordIndex": 0,"normalTextureScale": 0.1,"occlusionTextureIndex": -1,"occlusionTextureCoordIndex": -1,"occlusionTextureStrength": 1.0,"baseColor": { "x": 1.0, "y": 1.0, "z": 1.0, "w": 1.0 },"baseColorTextureIndex": -1,"baseColorTextureCoordIndex": 0,"baseColorTextureMotion": {"OffsetSpeedU": 0.0,"OffsetSpeedV": 0.0,"OffsetPeriod": 0.0,"TilingSpeedU": 1.0,"TilingSpeedV": 1.0,"TilingPeriod": 0.0},"metallicRoughnessTextureIndex": 1,"metallicRoughnessTextureCoordIndex": 0,"metallicFactor": 0.1,"roughnessFactor": 1.0,"snowEffect": {"snowMaskTextureIndex": 4,"snowNormalTextureIndex": 5,"snow_coverage": 0.32}},"textureunitstates": [{"textureunitstate": {"id": "M_Brick_Clay_Old_BaseTexMap","url": "M_Brick_Clay_Old_BaseTexMap.png","addressmode": { "u": 0, "v": 0, "w": 0 },"filteringoption": 0,"filtermin": 2,"filtermax": 2,"texmodmatrix": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0]}},{"textureunitstate": {"id": "M_Brick_Clay_Old_MetallicRoughMap","url": "M_Brick_Clay_Old_MetallicRoughMap.png","addressmode": { "u": 0, "v": 0, "w": 0 },"filteringoption": 0,"filtermin": 2,"filtermax": 2,"texmodmatrix": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0]}},{"textureunitstate": {"id": "M_Brick_Clay_Old_NormalMap","url": "M_Brick_Clay_Old_NormalMap.png","addressmode": { "u": 0, "v": 0, "w": 0 },"filteringoption": 0,"filtermin": 2,"filtermax": 2,"texmodmatrix": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0]}},{"textureunitstate": {"id": "M_Brick_Clay_Old_Ripple","url": "Ripple_Sheet.png","addressmode": { "u": 0, "v": 0, "w": 0 },"filteringoption": 0,"filtermin": 2,"filtermax": 2,"texmodmatrix": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0]}},{"textureunitstate": {"id": "Snow_masks","url": "Snow_masks.png","addressmode": { "u": 0, "v": 0, "w": 0 },"filteringoption": 0,"filtermin": 2,"filtermax": 2,"texmodmatrix": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0]}},{"textureunitstate": {"id": "Snow_normal","url": "Snow_normal.png","addressmode": { "u": 0, "v": 0, "w": 0 },"filteringoption": 0,"filtermin": 2,"filtermax": 2,"texmodmatrix": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,0.0, 0.0, 1.0]}}]}
}

然后需要加载一个三维模型，我就用iserver里面的CBD演示，

有这五个图层，等会就把树换下材质

选择树

let treeLayer = scene.layers.find("Tree@CBD") 
//设置材质
treeLayer.setPBRMaterialFromJSON(snow)

开启雪模式

        viewer.scene.postProcessStages.rain.enabled = falseviewer.scene.postProcessStages.snow.enabled = trueviewer.scene.postProcessStages.snow.uniforms.density = 10;viewer.scene.postProcessStages.snow.uniforms.angle = 0;viewer.scene.postProcessStages.snow.uniforms.speed = 3;

可以看到树都是白白的

开启雨

         viewer.scene.postProcessStages.rain.enabled = trueviewer.scene.postProcessStages.snow.enabled = falseviewer.scene.postProcessStages.rain.uniforms.angle = 6;viewer.scene.postProcessStages.rain.uniforms.speed = 6;

完整代码

<!-- 拖动滑块控制球体属性 -->
<template><div class="PartOneBox"><div id="cesiumContainer"></div><button style="border:1px solid red;padding:5px;" @click="type=!type">点我晴雪天切换</button></div>
</template><script setup lang='ts'>
import { ref, reactive,onMounted, watchEffect} from 'vue'
import snow from "../assets/MaterialJson/snow.json"
//true是雨天,false雪天
let type=ref(true)
let scene:any={}
let viewer:any={}onMounted(()=>
{viewer = new Cesium.Viewer('cesiumContainer')scene = viewer.scene//设置时间，会影响光线var utc=Cesium.JulianDate.fromDate(new Date("2024/08/26 9:30:00"))viewer.clock.currentTime=Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate())var labelImagery = new Cesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle["IMG_C"],//天地图全球中文注记服务token: "这是你的，你需要申请，也可以不加载底图" //由天地图官网申请的密钥})viewer.imageryLayers.addImageryProvider(labelImagery)//加载里面全部模型，也可以单个加载但不是用这个APIscene.open("http://localhost:8090/iserver/services/3D-CBD/rest/realspace")})watchEffect(()=>
{if(type.value)
{if(scene.layers)
{let treeLayer = scene.layers.find("Tree@CBD") treeLayer.removePBRMaterial()viewer.scene.postProcessStages.rain.enabled = falseviewer.scene.postProcessStages.snow.enabled = trueviewer.scene.postProcessStages.snow.uniforms.density = 10;viewer.scene.postProcessStages.snow.uniforms.angle = 0;viewer.scene.postProcessStages.snow.uniforms.speed = 3;treeLayer.setPBRMaterialFromJSON(snow)
}
}
else
{let treeLayer = scene.layers.find("Tree@CBD") treeLayer.removePBRMaterial()     viewer.scene.postProcessStages.rain.enabled = trueviewer.scene.postProcessStages.snow.enabled = falseviewer.scene.postProcessStages.rain.uniforms.angle = 6;viewer.scene.postProcessStages.rain.uniforms.speed = 6;treeLayer.setPBRMaterialFromJSON(snow)
}})</script><style scoped lang='scss'>
.PartOneBox
{width:1200px;height:1000px;margin:50px auto;position:relative;.cesiumContainer{width:100%;height:100%;}
}</style>