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>
相关推荐
天河归来17 分钟前
springboot框架redis开启管道批量写入数据
java·spring boot·redis
张先shen25 分钟前
Elasticsearch RESTful API入门:全文搜索实战
java·大数据·elasticsearch·搜索引擎·全文检索·restful
codervibe26 分钟前
如何用 Spring Security 构建无状态权限控制系统(含角色菜单控制)
java·后端
codervibe29 分钟前
项目中如何用策略模式实现多角色登录解耦?(附实战代码)
java·后端
TCChzp31 分钟前
synchronized全链路解析:从字节码到JVM内核的锁实现与升级策略
java·jvm
大葱白菜32 分钟前
🧩 Java 枚举详解:从基础到实战,掌握类型安全与优雅设计
java·程序员
笑衬人心。35 分钟前
在 Mac 上安装 Java 和 IntelliJ IDEA(完整笔记)
java·macos·intellij-idea
SimonKing42 分钟前
颠覆传统IO:零拷贝技术如何重塑Java高性能编程?
java·后端·程序员
小小不董1 小时前
深入理解oracle ADG和RAC
linux·服务器·数据库·oracle·dba
sniper_fandc1 小时前
SpringBoot系列—MyBatis(xml使用)
java·spring boot·mybatis