cesium/Cesium-Examples
1
0
Fork 0
mirror of https://github.com/jiawanlong/Cesium-Examples.git synced 2025-07-04 15:17:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

点光源

Browse Source
This commit is contained in:
jiawanlong 2025-03-31 10:42:55 +08:00
parent ab852fc303
commit cb3fd0eb4a
4 changed files with 279 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
examples/cesiumEx/7.1.7、点光源.html Normal file
View File

@ -0,0 +1,266 @@
<!--********************************************************************
* by dagedezhiyin
https://blog.csdn.net/dagedezhiyin/article/details/146601505
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cesium.com/downloads/cesiumjs/releases/1.127/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.127/Build/Cesium/Widgets/widgets.css"
rel="stylesheet" />
<script src="./cesium.map.min.js"></script>
</head>
<body style="
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<script type="text/javascript">
function init() { }
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
let viewer = new Cesium.Viewer("map", {});
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// // 添加底图
// var options = {
// style: "elec",
// crs: "WGS84",
// };
// viewer.imageryLayers.add(
// new Cesium.ImageryLayer(new Cesium.AMapImageryProvider(options))
// );
// setViewerTheme(viewer);
var options = {
crs: "WGS84", // 使用84坐标系，默认为：GCJ02
style: 4,
};
viewer.imageryLayers.add(
new Cesium.ImageryLayer(new Cesium.TencentImageryProvider(options))
);
// 添加白膜
initTiles();
async function initTiles() {
// 加载 3D Tiles
const palaceTileset = await Cesium.Cesium3DTileset.fromUrl(
"http://localhost:81/hefei/tileset.json"
);
// 添加到场景
viewer.scene.primitives.add(palaceTileset);
const lightPositionRed = Cesium.Cartesian3.fromDegrees(
117.23585,
31.83864,
100
);
const lightPositionGreen = Cesium.Cartesian3.fromDegrees(
117.21589,
31.840009,
100
);
const lightPositionBlue = Cesium.Cartesian3.fromDegrees(
117.213929,
31.8500233,
100
);
const lightColorRed = new Cesium.Cartesian3(3.0, 0.0, 0.0);
const lightColorGreen = new Cesium.Cartesian3(0.0, 3.0, 0.0);
const lightColorBlue = new Cesium.Cartesian3(1.0, 3.0, 3.0);
const lightRadius = 700.0;
palaceTileset.customShader = new Cesium.CustomShader({
mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
lightingModel: Cesium.LightingModel.UNLIT,
uniforms: {
u_lightPositionRed: {
type: Cesium.UniformType.VEC3,
value: lightPositionRed,
},
u_lightPositionGreen: {
type: Cesium.UniformType.VEC3,
value: lightPositionGreen,
},
u_lightPositionBlue: {
type: Cesium.UniformType.VEC3,
value: lightPositionBlue,
},
u_lightColorRed: {
type: Cesium.UniformType.VEC3,
value: lightColorRed,
},
u_lightColorGreen: {
type: Cesium.UniformType.VEC3,
value: lightColorGreen,
},
u_lightColorBlue: {
type: Cesium.UniformType.VEC3,
value: lightColorBlue,
},
u_lightRadius: {
type: Cesium.UniformType.FLOAT,
value: lightRadius,
},
},
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionWC = (czm_model * vec4(fsInput.attributes.positionMC, 1.0)).xyz;
vec3 normalEC = normalize(fsInput.attributes.normalEC);
vec3 totalLight = vec3(0.0);
// 计算红色光源
vec3 lightDirRed = u_lightPositionRed - positionWC;
float distanceRed = length(lightDirRed);
vec3 lightDirectionRed = normalize(lightDirRed);
float diffuseFactorRed = max(dot(normalEC, lightDirectionRed), 0.9);
vec3 diffuseRed = diffuseFactorRed * u_lightColorRed;
float distanceFactorRed = clamp(distanceRed / u_lightRadius, 0.2, 1.0);
// 修改为你提供的颜色
vec3 customRedColor = vec3(0.0, 0.1, 0.3); // 自定义颜色：#3C96FA (RGB)
// 如果在光源范围外，设置渐变颜色
vec3 mixedColorRed = mix(customRedColor, diffuseRed, 1.0 - distanceFactorRed); // 从蓝色到红色的渐变
totalLight += mixedColorRed;
// 计算绿色光源
vec3 lightDirGreen = u_lightPositionGreen - positionWC;
float distanceGreen = length(lightDirGreen);
vec3 lightDirectionGreen = normalize(lightDirGreen);
float diffuseFactorGreen = max(dot(normalEC, lightDirectionGreen), 0.9);
vec3 diffuseGreen = diffuseFactorGreen * u_lightColorGreen;
float distanceFactorGreen = clamp(distanceGreen / u_lightRadius, 0.2, 1.0);
// 修改为你提供的颜色
vec3 customGreenColor = vec3(0,0.1,0.3); // 自定义颜色：#3C96FA (RGB)
// 如果在光源范围外，设置渐变颜色
vec3 mixedColorGreen = mix(customGreenColor, diffuseGreen, 1.0 - distanceFactorGreen); // 从蓝色到红色的渐变
totalLight += mixedColorGreen;
// 计算蓝色光源
vec3 lightDirBlue = u_lightPositionBlue - positionWC;
float distanceBlue = length(lightDirBlue);
vec3 lightDirectionBlue = normalize(lightDirBlue);
float diffuseFactorBlue = max(dot(normalEC, lightDirectionBlue), 0.9);
vec3 diffuseBlue = diffuseFactorBlue * u_lightColorBlue;
float distanceFactorBlue = clamp(distanceBlue / u_lightRadius, 0.2, 1.0);
// 修改为你提供的颜色
vec3 customBlueColor = vec3(0,0.1,0.3); // 自定义颜色：#3C96FA (RGB)
// 如果在光源范围外，设置渐变颜色
vec3 mixedColorBlue = mix(customBlueColor, diffuseBlue, 1.0 - distanceFactorBlue); // 从蓝色到红色的渐变
totalLight += mixedColorBlue;
material.diffuse = totalLight;
// 计算光环效果（保持原样）
float _baseHeight = -10.0;
float _heightRange = 100.0;
float _glowRange = 300.0;
float vtxf_height = fsInput.attributes.positionMC.z - _baseHeight;
float vtxf_a11 = fract(czm_frameNumber / 100.0) * 3.14159265 * 2.0;
float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
material.diffuse *= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
float vtxf_a13 = fract(czm_frameNumber / 360.0);
float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
material.diffuse += material.diffuse * (1.0 - vtxf_diff);
}
`,
});
viewer.zoomTo(palaceTileset);
// setTimeout(() => {
// updateLightPosition(palaceTileset, 121.25, 31.4, "red");
// }, 5000);
}
// 动态更新光源位置
function updateLightPosition(tileset, newLongitude, newLatitude, lightIndex) {
const newLightPosition = Cesium.Cartesian3.fromDegrees(
newLongitude,
newLatitude,
100
);
// 根据 lightIndex 更新不同的光源位置
if (lightIndex === "red") {
tileset.customShader.uniforms.u_lightPositionRed.value =
newLightPosition;
} else if (lightIndex === "green") {
tileset.customShader.uniforms.u_lightPositionGreen.value =
newLightPosition;
} else if (lightIndex === "blue") {
tileset.customShader.uniforms.u_lightPositionBlue.value =
newLightPosition;
}
}
function setViewerTheme(viewer, options = {}) {
const baseLayer = viewer.imageryLayers.get(0);
if (!baseLayer) return;
baseLayer.brightness = options.brightness ?? 0.6;
baseLayer.contrast = options.contrast ?? 1.8;
baseLayer.gamma = options.gamma ?? 0.3;
baseLayer.hue = options.hue ?? 1;
baseLayer.saturation = options.saturation || 0;
const baseFragShader =
viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource
.sources;
for (let i = 0; i < baseFragShader.length; i++) {
const strS =
"color = czm_saturation(color, textureSaturation);\n#endif\n";
let strT =
"color = czm_saturation(color, textureSaturation);\n#endif\n";
if (!options.invertColor) {
strT += `
color.r = 1.0 - color.r;
color.g = 1.0 - color.g;
color.b = 1.0 - color.b;
`;
}
strT += `
color.r = color.r * ${options.filterRGB_R ?? 100}.0/255.0;
color.g = color.g * ${options.filterRGB_G ?? 138}.0/255.0;
color.b = color.b * ${options.filterRGB_B ?? 230}.0/255.0;
`;
baseFragShader[i] = baseFragShader[i].replace(strS, strT);
}
viewer.scene.requestRender();
}
</script>
</body>
</html>

13
examples/cesiumEx/config.js
View File

@ -1025,6 +1025,12 @@ var exampleConfig = {
thumbnail: "7.1.5、流动线.jpg",
fileName: "7.1.5、流动线"
},
{
name: "7.1.7、点光源",
name_en: "7.1.7、点光源",
thumbnail: "7.1.7、点光源.jpg",
fileName: "7.1.7、点光源"
},
]
},
"map1322345514333231": {
@ -1069,7 +1075,12 @@ var exampleConfig = {
thumbnail: "8.1.5、等值面.jpg",
fileName: "8.1.5、等值面"
},
{
name: "8.1.6、六边形网格",
name_en: "8.1.6、六边形网格",
thumbnail: "8.1.6、六边形网格.jpg",
fileName: "8.1.6、六边形网格"
},
]
},
"map11cddd3233231": {

BIN
examples/cesiumEx/img/7.1.7、点光源.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB