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

更新赞赏

Browse Source
This commit is contained in:
贾宛龙 2025-10-20 17:56:15 +08:00
parent f4c35e962e
commit 9c9a0164ad
8 changed files with 313 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -88,6 +88,7 @@
| hawken | 100 | 2025.09.08 |
| 打不掉头的僵尸 | 20 | 2025.09.23 |
| 四棱子 | 20 | 2025.09.29 |
| 大白 | 100 | 2025.10.20 |
### 关于打赏
- 您的每一笔打赏，我都会原封不动以**您的名义**捐赠到腾讯公益。

BIN
donate/159861999120251020E6KNN9AB71.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

1
donate/index.html
View File

@ -45,6 +45,7 @@
<img src="./159297686120250908E6I6WNCDJ8.jpg">
<img src="./159297686120250923E6KP3S7L8P.jpg">
<img src="./159297686120250930E6C50TABFT.jpg">
<img src="./159861999120251020E6KNN9AB71.jpg">
</body>
</html>

BIN
donate/list1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 177 KiB

277
examples/cesiumEx/9.1.3.html
View File

@ -1,277 +0,0 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.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>
<div style="position: absolute; z-index: 1000; left: 0;top: 0;">
<button onclick="customShader1()">贴图</button>
<button onclick="customShader2()">贴图2</button>
<button onclick="customShader3()">贴图3</button>
<button onclick="clears()">清除</button>
</div>
<script type="text/javascript">
window.viewer = new Cesium.Viewer('map', {
imageryProvider: false,
baseLayerPicker: false,
});
var xyz = new Cesium.UrlTemplateImageryProvider({
"credit": "安徽",
"url": '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
})
viewer.imageryLayers.addImageryProvider(xyz)
// 开启帧率
viewer.scene.debugShowFramesPerSecond = true;
const tileset = new Cesium.Cesium3DTileset({
url: "./data/tileset.json",
});
tileset.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset)
})
.catch(function (error) {
console.log(error);
});
function customShader1() {
let customShader = new Cesium.CustomShader({
//设置变量，由顶点着色器传递给片元着色器
varyings: {
v_normalMC: Cesium.VaryingType.VEC3,
v_st: Cesium.VaryingType.VEC3
},
//外部传给顶点着色器或者片元着色器
uniforms: {
u_texture: {
value: new Cesium.TextureUniform({
url: "./z.png"
}),
type: Cesium.UniformType.SAMPLER_2D
},
u_texture1: {
value: new Cesium.TextureUniform({
url: "./z.png"
}),
type: Cesium.UniformType.SAMPLER_2D
},
z_texture1: {
value: new Cesium.TextureUniform({
url: "./z.png"
}),
type: Cesium.UniformType.SAMPLER_2D
}
},
//贴纹理
//顶点着色器
//将法向量从顶点着色器设置变量传给片元着色器
vertexShaderText: `
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
v_normalMC = vsInput.attributes.normalMC;
v_st=vsInput.attributes.positionMC ;
}`,
//片元着色器
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionMC = fsInput.attributes.positionMC;
//这里是设置要贴图的图片的尺寸，设置小了会重复
float width = 190.0;
float height = 190.0;
vec3 rgb;
//这是是设置了屋顶的颜色，当和法向量平行时，就是屋顶，这里设置0.95，相当于垂直，建筑物四周开始贴图
if (dot(vec3(0.0, 1.0, 0.0), v_normalMC) > 0.95) {
float textureX = 0.0;
float dotYAxis = dot(vec3(0.0, 0.0, 1.0), v_normalMC);
float textureY = mod(positionMC.y, height) / height;
textureX = mod(positionMC.x, width) / width;
rgb = texture(z_texture1, vec2(textureX, textureY)).rgb;
material.diffuse = rgb;
} else {
float textureX = 0.0;
float dotYAxis = dot(vec3(0.0, 0.0, 1.0), v_normalMC);
float textureY = mod(positionMC.y, height) / height;
if (dotYAxis > 0.71 || dotYAxis < -0.71) {
//x代表的是前后面
textureX = mod(positionMC.x, width) / width;
rgb = texture(u_texture, vec2(textureX, textureY)).rgb;
} else {
//z代表的是左右面
textureX = mod(positionMC.z, width) / width;
rgb = texture(u_texture1, vec2(textureX, textureY)).rgb;
}
material.diffuse = rgb;
}
}`
})
tileset.customShader = customShader
}
function customShader2() {
let customShader = new Cesium.CustomShader({
// lightingModel: Cesium.LightingModel.UNLIT,
// lightingModel: Cesium.LightingModel.PBR,
//设置变量，由顶点着色器传递给片元着色器
varyings: {
v_normalMC: Cesium.VaryingType.VEC3,
v_st: Cesium.VaryingType.VEC3
},
//外部传给顶点着色器或者片元着色器
uniforms: {
u_texture: {
value: new Cesium.TextureUniform({
url: "./wall.jpg"
}),
type: Cesium.UniformType.SAMPLER_2D
},
u_texture1: {
value: new Cesium.TextureUniform({
url: "./wall.jpg"
}),
type: Cesium.UniformType.SAMPLER_2D
}
},
//贴纹理
//顶点着色器
//将法向量从顶点着色器设置变量传给片元着色器
vertexShaderText: `
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
v_normalMC = vsInput.attributes.normalMC;
v_st=vsInput.attributes.positionMC ;
}`,
//片元着色器
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionMC = fsInput.attributes.positionMC;
//这里是设置要贴图的图片的尺寸，设置小了会重复
float width = 30.0;
float height = 70.0;
vec3 rgb;
//这是是设置了屋顶的颜色，当和法向量平行时，就是屋顶，这里设置0.95，相当于垂直，建筑物四周开始贴图
if (dot(vec3(0.0, 1.0, 0.0), v_normalMC) > 0.95) {
material.diffuse = vec3(0.65, 0.65, 0.65);
} else {
float textureX = 0.0;
float dotYAxis = dot(vec3(0.0, 0.0, 1.0), v_normalMC);
// cos(45deg) 约等于 0.71，这里是建筑物四周的向量与法向量会大于四十五度夹角
if (dotYAxis > 0.71 || dotYAxis < -0.71) {
//x代表的是前后面
textureX = mod(positionMC.x, width) / width;
} else {
//z代表的是左右面
textureX = mod(positionMC.z, width) / width;
}
float textureY = mod(positionMC.y, height) / height;
//我这里是根据建筑物高度贴了两张不同的图片
if (positionMC.y > 30.0) {
rgb = texture(u_texture, vec2(textureX, textureY)).rgb;
} else {
rgb = texture(u_texture1, vec2(textureX, textureY)).rgb;
}
material.diffuse = rgb;
//此处以下为光线效果
float _baseHeight = 10.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
float _glowRange = 120.0; // 光环的移动范围(高度)
float vtxf_height = fsInput.attributes.positionMC.y - _baseHeight;
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.01, abs(vtxf_h - vtxf_a13)); // 0.1 为高亮光条的范围（粗细）
material.diffuse += material.diffuse * (1.0 - vtxf_diff);
}
}`
})
tileset.customShader = customShader
}
function customShader3() {
let customShader = new Cesium.CustomShader({
varyings: {
v_normalMC: Cesium.VaryingType.VEC3,
v_st: Cesium.VaryingType.VEC3
},
//外部传给顶点着色器或者片元着色器
uniforms: {
u_texture: {
value: new Cesium.TextureUniform({
url: "./wall.jpg"
}),
type: Cesium.UniformType.SAMPLER_2D
},
u_texture1: {
value: new Cesium.TextureUniform({
url: "./wall1.jpg"
}),
type: Cesium.UniformType.SAMPLER_2D
}
},
//贴纹理
//顶点着色器
//将法向量从顶点着色器设置变量传给片元着色器
vertexShaderText: `
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
v_normalMC = vsInput.attributes.normalMC;
v_st=vsInput.attributes.positionMC ;
}`,
//片元着色器
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionMC = fsInput.attributes.positionMC;
//这里是设置要贴图的图片的尺寸，设置小了会重复
float width = 30.0;
float height = 70.0;
vec3 rgb;
//这是是设置了屋顶的颜色，当和法向量平行时，就是屋顶，这里设置0.95，相当于垂直，建筑物四周开始贴图
if (dot(vec3(0.0, 1.0, 0.0), v_normalMC) > 0.95) {
material.diffuse = vec3(0.65, 0.65, 0.65);
} else {
float textureX = 0.0;
float dotYAxis = dot(vec3(0.0, 0.0, 1.0), v_normalMC);
// cos(45deg) 约等于 0.71，这里是建筑物四周的向量与法向量会大于四十五度夹角
if (dotYAxis > 0.71 || dotYAxis < -0.71) {
textureX = mod(positionMC.x, width) / width;
} else {
textureX = mod(positionMC.z, width) / width;
}
float textureY = mod(positionMC.y, height) / height;
rgb = texture(u_texture1, vec2(textureX, textureY)).rgb;
material.diffuse = rgb;
}
}`
})
tileset.customShader = customShader
}
function clears() {
let customShader = new Cesium.CustomShader({})
tileset.customShader = customShader
}
</script>
</body>
</html>

126
examples/cesiumEx/9.1.3、Primitive_triangles_局部坐标.html Normal file
View File

@ -0,0 +1,126 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.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>
window.viewer = new Cesium.Viewer('map', {
imageryProvider: false,
baseLayerPicker: false,
});
var xyz = new Cesium.UrlTemplateImageryProvider({
"credit": "安徽",
"url": '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
})
viewer.imageryLayers.addImageryProvider(xyz)
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110, 30, 10000)
});
initBoxByPoint();
function initBoxByPoint() {
const vertices = new Float64Array([
// 前
0, 0, -100, // E点
100, -100, 100, //A点
-100, -100, 100, //B点
// 后
0, 0, -100, // E点
-100, 100, 100, //C点
100, 100, 100, //D点
// 左
0, 0, -100, // E点
-100, -100, 100, //B点
-100, 100, 100, //C点
// 右
0, 0, -100, // E点
100, 100, 100, //D点
100, -100, 100, //A点
// 上
100, -100, 100, //A点
-100, -100, 100, //B点
100, 100, 100, //D点
-100, -100, 100,//B点
100, 100, 100, //D点
-100, 100, 100, //C点
])
const triangles = [
// 每个面由 3 个点组成
[new Cesium.Cartesian3(0, 0, -100), new Cesium.Cartesian3(100, -100, 100), new Cesium.Cartesian3(-100, -100, 100)], // 前
[new Cesium.Cartesian3(0, 0, -100), new Cesium.Cartesian3(-100, 100, 100), new Cesium.Cartesian3(100, 100, 100)],   // 后
[new Cesium.Cartesian3(0, 0, -100), new Cesium.Cartesian3(-100, -100, 100), new Cesium.Cartesian3(-100, 100, 100)], // 左
[new Cesium.Cartesian3(0, 0, -100), new Cesium.Cartesian3(100, 100, 100), new Cesium.Cartesian3(100, -100, 100)],   // 右
[new Cesium.Cartesian3(100, -100, 100), new Cesium.Cartesian3(-100, -100, 100), new Cesium.Cartesian3(100, 100, 100)], // 上1
[new Cesium.Cartesian3(-100, -100, 100), new Cesium.Cartesian3(100, 100, 100), new Cesium.Cartesian3(-100, 100, 100)], // 上2
]
constcomputeNormal = (p0, p1, p2) => { // 三角形法线计算
const d1 = Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3())
const d2 = Cesium.Cartesian3.subtract(p2, p0, new Cesium.Cartesian3())
const normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3())
return Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3())
}
let normals = []
for (const [p0, p1, p2] of triangles) {    // 每个三角形 3 个顶点的法线相同
const normal = constcomputeNormal(p0, p1, p2)
normals.push(normal.x, normal.y, normal.z, normal.x, normal.y, normal.z, normal.x, normal.y, normal.z)
}
const boundingSphere = Cesium.BoundingSphere.fromVertices(vertices);
const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(114.347137, 30.541429, 200))
const geometry = new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: vertices
}),
normal: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
values: new Float64Array(normals)
})
},
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere
})
const instance = new Cesium.GeometryInstance({
geometry: geometry,
modelMatrix,
})
viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
asynchronous: false, // 关闭异步
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType('Color', {
color: Cesium.Color.fromCssColorString(`rgba(68,138,145, 1)`)
}),
faceForward: true, // 确保法线朝向正确
}),
compressVertices: false,
}))
const worldBoundingSphere = Cesium.BoundingSphere.transform(geometry.boundingSphere, modelMatrix, new Cesium.BoundingSphere());
viewer.camera.flyToBoundingSphere(worldBoundingSphere);
}
</script>
</body>
</html>

127
examples/cesiumEx/9.1.3、Primitive_triangles_笛卡尔坐标.html Normal file
View File

File diff suppressed because one or more lines are too long

58
examples/cesiumEx/9.1.4、自定义瓦片请求.html Normal file
View File

@ -0,0 +1,58 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.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>
window.viewer = new Cesium.Viewer('map', {
imageryProvider: false,
baseLayerPicker: false,
});
var xyz = new Cesium.UrlTemplateImageryProvider({
"credit": "安徽",
"url": '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
})
viewer.imageryLayers.addImageryProvider(xyz)
class CustomImageryProvider extends Cesium.UrlTemplateImageryProvider {
constructor(options = {}) {
super(options)
}
requestImage(x, y, level, request) {
const rectangle = this._tilingScheme.tileXYToRectangle(x, y, level);
const west = Cesium.Math.toDegrees(rectangle.west);
const south = Cesium.Math.toDegrees(rectangle.south);
const east = Cesium.Math.toDegrees(rectangle.east);
const north = Cesium.Math.toDegrees(rectangle.north);
// 2. 构建带bbox参数的请求URL（格式需与服务器约定）
// 示例URL：/api/image?bbox=west,south,east,north&format=png
const bbox = [west, south, east, north].join(',');
console.log(level, '-------------', x, y)
console.log(bbox)
return Promise.resolve();
}
}
const imageryProvider = new CustomImageryProvider({
url: '你的实际地图URL', // 需要替换为真实URL
minimumLevel: 1,
maximumLevel: 18, // 通常最大级别不会到111
});
let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
</script>
</body>
</html>