首先新建一个文件夹来存放材质，我选择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>
