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 = false
        viewer.scene.postProcessStages.snow.enabled = true
		viewer.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 = true
      viewer.scene.postProcessStages.snow.enabled = false
          viewer.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)
        //加载里面全部模型，也可以单个加载但不是用这个API
       scene.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 = false
        viewer.scene.postProcessStages.snow.enabled = true
		viewer.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 = true
      viewer.scene.postProcessStages.snow.enabled = false
          viewer.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>