- 博客(165)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Cesium快速入门34：3dTile高级样式设置
* 广州塔经纬度（vec2 格式） */defines: {distance:},/* 距离 > 0.02° 的直接隐藏 *//* 距离渐变：越近越红，越远越淡 */color: {"rgba(255, 0, 0, 0.9)", // 内圈：鲜红],"rgba(0, 255, 255, 0.5)", // 外圈：青半透明],["true", "rgba(255, 255, 255, 0.2)"], // 兜底：淡白],},});distance()
2025-12-28 01:09:54
156
原创 Cesium快速入门33：tile3d设置样式
这一节，我们给换皮肤——让一栋栋建筑按“类型、高度”自动变色，瞬间把灰白城市变成“彩虹都市”。全程只用官方样式语言，无需写着色器。
2025-12-26 00:17:02
362
原创 Cesium快速入门32：3Dtiles与性能监控
这一节，我们钻进的“瓦片世界”——搞懂它如何把切成一块块小瓦片，按需流式加载，既不让 GPU 爆炸，又能保持画面精细。最后亲手加载一套本地瓦片，再用官方调试工具实时看帧率、看边界、看内存，做到“心中有数”。
2025-12-25 00:35:51
576
原创 Cesium快速入门31： 追踪飞机航班动画
这一节，我们把“飞机”请进 Cesium：从起飞到降落，全程按真实时间点飞行，轨迹自动插值、机头自动对准航线，再配上路径尾迹，一眼就能看到它越洋跨洲的全过程。
2025-12-24 00:10:46
265
原创 Cesium快速入门29：CMZL数据格式加载
前面我们用“谷歌系”KML 过了一把瘾，今天换——。它同样是“地理 + 时间”的 JSON 套餐，却天生带动态属性：位置、颜色、尺寸都能按时间轴自动插值，一行代码就能让车子跑、让盒子变色、让路线自己长出来。
2025-12-20 23:35:41
388
原创 Cesium快速入门28：KML数据格式加载
上一节我们用把“四川”搬进了地球；今天换另一张王牌——它本质上是“Google 版”的地理标注格式，功能与 GeoJSON 类似，只是套了层 XML 外衣。额外福利：KML 还有压缩版（就是个 ZIP 包），体积更小，网络传输更友好。
2025-12-20 01:11:20
546
原创 Cesium快速入门27：GeoJson自定义样式
上一节我们把 GeoJSON 成功“搬”进了地球，但默认白膜+黑边看起来总归有点“素”。今天给它来点颜色——，再顺手把属性数据掏出来，让地图既好看又有“统计味儿”。
2025-12-18 23:59:38
417
原创 Cesium快速入门26：加载渲染GeoJson数据
用 Cesium 做地理信息可视化，最常见的数据来源就是。今天带你把“四川地图”整个搬进来，一行代码加载，一行代码上色，比用 Three.js 自己解析省十倍功夫。
2025-12-17 23:40:41
773
原创 Cesium快速入门25：自定义MaterialProperty
上一节课，我们能在 Primitive 里徒手写着色器；今天把“魔杖”伸回——让它也用上完全自定义的材质。思路一句话：Entity 只认接口，我们手写一个类，把 Fabric + GLSL 塞进去，就能像官方材质一样随取随用。
2025-12-17 23:17:17
270
原创 Cesium快速入门24：Appearance编写着色器修改外观
上一节课，我们只在里写着色器；今天把“魔爪”伸到——直接重写片元着色器，一样能让像素跳舞，而且套路更简单、更暴力。
2025-12-16 23:45:38
273
原创 Cesium快速入门23：cesium着色器自带函数与变量
这节课，我们真正动手“写”材质——在 Fabric 里直接撸 GLSL 源码，让条纹动起来，为后面做扫描、雷达、飞线打好底子。先弄清两个结构，再写两行代码，你就能让像素听你指挥。
2025-12-16 23:18:26
489
原创 Cesium快速入门22：fabric自定义着色器
只要你在 Fabric 里提供source，系统就把这段字符串原封不动塞进最终着色器，想返回什么颜色都行。示例：整面涂纯红fabric: {uniforms: {}, // 暂无外部参数source: `// 先拿默认结构// 漫反射=红色return mat;});帮你把结构体初始化好；改就是改表面颜色；想调透明度再动mat.alpha，想自发光就改，全靠你发挥。
2025-12-15 23:47:14
794
原创 Cesium快速入门20：Primitive的外观设置Appearance
前面我们学会了用 Entity 换皮肤；今天轮到 Primitive——自己捏几何体后，再给它穿什么样的“外衣”。在 Cesium 里，这件外衣叫 Appearance（外观）。它决定“像素怎么画、用什么材质、要不要光照”等所有渲染细节。上回我们图省事，用了 ，直接拿实例颜色当颜料。其实官方还备了好几套“成衣”，下面挑最常用的 3 件挨个试穿。特点不额外设置材质，颜色从 里取；最快、最省，适合做“海量同色不同区”的批量绘制。 （上节课已用过，这里不再贴代码）假设你的几何体永远和地球椭球面平行（道
2025-12-14 00:11:35
353
原创 Cesium快速入门19：Entity折线材质
上一节课我们把“面”的材质讲完了，今天换“线”——折线（Polyline）。不管是道路、航线还是飞线特效，全靠下面几种现成材质，一句代码就能换皮肤。
2025-12-13 23:42:17
217
原创 Cesium快速入门18：Entity材质设置
前面的课程里，我们先后讲了 Entity（实体）和 Primitive（图元）这两种“物体”。它们都能贴材质，只不过用法有简有繁。今天先集中火力把撸一遍，看看 Cesium 到底给我们备好了哪些“现成布料”，以及怎么换布料。
2025-12-13 00:39:08
264
原创 Cesium快速入门17：与entity和primitive交互
上节课我们学会了“一个图元里塞多个物体”。新问题来了：鼠标随便点一下，我怎么知道到底点中了谁？能不能像 Three.js 那样“指谁打谁”？答案当然是可以，套路还是那条老路——。Cesium 已经把鼠标事件封装得服服帖帖，我们直接拿来用就行。下面分三步：先建“鼠标监听器”；再拿屏幕坐标去拾取；拾到谁，就改谁的颜色，给它一个“被选中的”反馈。
2025-12-13 00:09:15
301
原创 Cesium快速入门16：Primitive多个实体与颜色修改
上一节课，我们初步认识了 Cesium 的图元（Primitive），当时只放了一个几何体。其实，。这样做的好处很明显：一次合并，一次绘制调用，性能更高；每个实例还能单独改颜色、显隐，灵活性不减。今天就把“多实例”和“动态改色”两件事一次讲透。
2025-12-12 23:34:20
419
原创 Cesium快速入门15：图元Primitive创建图像物体
前面我们一直用 Entity——也就是“实体”——画矩形、椭球、走廊、圆柱、多边形、球体等等。Entity 把底层细节包得严严实实，一两行代码就能出效果。可如果想再“底层”一点，自己捏顶点、配材质、写外观，那就得请出今天的主角：Primitive（图元）。思路跟 Three.js 很像：先造几何体 → 再搞实例 → 再给外观 → 最后扔进场景。步骤多了，但自由度直接拉满，后面甚至能自己写着色器做烟雾、流体等特效。
2025-12-11 23:42:36
436
原创 Cesium快速入门14：多边形体积折线矩形椭球体设置
加大“经度/纬度细分”数值，线条就会更密，曲面更圆润，当然顶点也更多，性能略降，按需调节。在 Cesium 里，只要把一组经纬度按顺序丢给它，就能在地面或空中生成一片“面”。矩形跟多边形类似，只是不用逐点，而是直接给“东南西北”四个边界值，就能框出一块区域。如果想让多边形“立”起来，就打开“高度”开关，瞬间变成一块“板子”。点也能任意加，两个点能画，二十个点也能画，航线、轨迹、边界都能用。洞还能再套洞，想多复杂都行，逻辑就是“外环包内环”。材质全部封装好，换颜色、换宽度、换样式，一句话搞定。
2025-12-11 22:47:44
1302
原创 Cesium快速入门13：椭圆等物体的添加与摄像聚焦
作业：把今天所有几何体坐标改成“广州塔”附近，再让相机飞过去，看谁能把广州塔“包”在最炫的椭圆里！今天换个思路：如果我想在地面“铺”一块多边形、画一个圆、拉一条走廊，甚至竖一根柱子，该怎么做？运行后，一个绿色大圆盘悬在太空，边缘带一圈黑色描边，肉眼可见“扁平地球”玩笑现场。Cesium 把常用几何体都封装好了，只要会抄官方示例，再改几个数字就能用。用法套路一模一样：给位置、给高度、给材质，想挤出就加。走廊 = 给折线加“宽度”，可悬空、可挤出、可设转角。，给折线加宽度，可设转角、可挤出。
2025-12-10 23:44:21
357
原创 Cesium快速入门12：添加gltf模型
不加这个参数，飞机缩到远处会变成“芝麻”，加了 100，再远也能看到“小飞机”而不是“小灰尘”。接下来玩点“大”的——把一架真飞机停到城市上空，顺便把 Cesium 的模型加载流程一次性讲透。再远才隐藏，避免“空气飞机”。滚轮往后拉，飞机缩小到 100 像素就不再变小，始终能看清轮廓。模型，直接替换路径即可，Cesium 原生支持，无需额外库。会找路径、写 uri，把任意 glb 模型拖进 Cesium。：摄像机距离模型多远时显示，超出范围自动隐藏，省性能。：给模型加一圈颜色描边，远处一眼能认出。
2025-12-09 19:30:02
323
原创 Cesium快速入门11：广告牌添加
实际项目里，一般“红点 + 图片 + 文字”三选二就行，太多会叠成“千层饼”。塔尖一张靓照，底下“广州塔”三个白字，3D 建筑环抱四周，层次干净又不抢戏。打开 iconfont 或其他图库，搜“广州塔”，挑一张顺眼的。（演示）第一次跑，图片和小红点挤在一起？改高度：把 700 改成 750，图片就“飘”上去一层。大家按场景自由删减，大小、偏移、透明度都能再细调。上节课我们插了一个小红点，也加载了 3D 建筑。，图片顶部贴着坐标点，底部自然悬空，瞬间清爽。下节课我们继续给地球“加戏”，拜拜！
2025-12-09 18:55:09
220
原创 Cesium快速入门10：添加物体与3D建筑
同学们好！今天这节课，我们给地球“加点料”——先画一个红点，再叠一个标签，最后把整座城市“3D 化”，让广州塔真正“立”起来。
2025-12-09 11:45:37
266
原创 Cesium快速入门9：相机动画与交互
按 W 前进，按 S 后退，按 A 左平移，按 D 右平移，甚至抬头、低头、翻滚，全由键盘说了算。运行后，地球会平滑旋转、下降，最后稳稳停在天安门上空，像电影航拍一样，非常酷！如果你想“点击按钮再飞”，只要把这段代码放进按钮的点击事件里即可，完全没问题。按 G / H：整个画面像飞机做滚筒飞行动作，逆时针或顺时针旋转。用键盘事件 + 相机方法，手动开“飞机”，想怎么飞就怎么飞。离地面 10000 米时，speed = 100 米/次，刚才的“自动飞行”很炫，但有时候我们想自己开“飞机”——
2025-12-08 18:30:55
292
原创 Cesium快速入门8：相机的方向与位置
上节我们把坐标系“翻译官”学会后，今天专攻“摄影师”——相机。heading ＝ 偏航角：机头左右转，绕 Z 轴（地心→北极那根轴）。pitch 0° ＝ 水平正视，负值向下（俯瞰），正值向上（仰望）。做项目 → 常常要求“一键直达天安门”“斜 45° 俯瞰工地”。heading 左右看，pitch 上下看，roll 歪头看。heading 0° ＝ 正北方向，正值向东转，负值向西转。做漫游 → 后续还要让相机平滑飞行，今天先学“瞬间到达”。今天只是“闪现”，下节课让相机“坐飞机”——
2025-12-08 11:43:51
383
原创 Cesium快速入门7：坐标系与坐标系转换
人类读得懂“经纬度”，所以 UI 上得显示 Cartographic（lng、lat、alt）。一句话总结：先把“地球”想成一颗光滑的椭球，再记住三种“坐标语言”，最后学会随时“翻译”即可。fromDegrees / fromRadians 别混：一个喂“度”，一个喂“弧度”。空间坐标转地理坐标时，高度会原样带回，误差通常 < 1 cm。Cesium 内部全部用弧度说话，但我们嘴巴习惯说“度”。如何把“鼠标点击的像素”一步变成“带高度的经纬度”——“像素⇄空间⇄经纬度”三条通道必须随时打通。
2025-12-08 10:51:09
199
原创 Cesium快速入门6:地形加载
同学们好！今天这节课，我们专门聊聊“地形”——Cesium 里怎么把一片平平无奇的地球，变成有山有水、凹凸起伏的真实世界。下面我把整段操作思路，按顺序、一句不漏地给大家捋一遍。为了方便阅读，我加了标点、分了段，关键代码也保留了，但只在旁边写中文注释，不动原代码。
2025-12-08 09:48:02
753
原创 Cesium快速入门5：自定义地图与地图叠加
网络不稳时，默认影像可能刷不出来，地球成了“白板”。国内项目常要求“国测”数据，天地图（国家地理信息公共服务平台）最权威。自己部署的地图服务也能直接接进来，前后端分工明确，前端只负责“照单收图”。
2025-12-07 01:39:32
182
原创 Cesium快速入门4：天空盒
有时候，默认的宇宙星空看着太黑、太科幻，我想换个更通透、更“天空”的感觉，比如蓝天白云、晨曦晚霞，行不行？下载下来的文件通常是 HDR 或 EXR，但 Cesium 要的是 6 张方形 PNG（立方体展开图）。这种背景就叫“天空盒”（SkyBox），换成银河、宇宙、晴空、晚霞，随你喜欢。进去后搜“sky”“sunset”“cloud”等关键词，看到中意的就下载。我给大家准备了一个现成的天空盒，也顺便把整套流程捋一遍，照着做就能换。只要六张新图覆盖旧图，或者改路径，保存即生效，无需重启服务。
2025-12-07 00:51:31
326
原创 Cesium快速入门3：详讲viewer查看器
它负责管搜索框、Home 键、2D/3D 切换、底图选择器、时间轴、全屏按钮……Viewer 的第二个参数是“总开关”， true 显示 / false 隐藏。下节课我们再给“清爽地球”叠自己的建筑、管线、矢量，让它真正“活”起来。（与 animation 配套，拖拽时间轴能看到日照、星空变化）（Bing、ArcGIS、黑夜、矢量……官方给的“影像套餐”）（点一下弹出“左键拖拽、右键缩放、中键旋转”的提示）刷新页面，只剩一个干干净净的地球，别的按钮全消失。（点击实体后弹出的报错信息，这节课用不到，先关）
2025-12-07 00:09:28
326
原创 Cesium快速入门2：Cesium基础设置
上一节课，我们“一口气”把 Cesium 应用跑起来了。今天先不忙写新代码，回头拆一拆“最小可运行”的 Demo，看看它到底由哪些“积木”拼成。
2025-12-06 14:37:18
493
原创 Cesium快速入门1：打造第一个Cesium应用
它可以支持海量的三维模型数据，也就是说，我们可以根据自己的需要，选择展示地球的某一部分内容，并以三维的方式更直观、更快速地进行展示。在沙盒中，我们可以直接查看代码和效果，通过代码与可视化内容的结合，快速学习和理解如何实现三维地球的展示。同时，Cesium 还提供了丰富的工具，帮助我们快速实现地理数据的可视化展示。文件，把默认内容清空。接下来，我们就用 Vue3 来创建一个最简单的项目，运行我们的第一个 Cesium 示例。所以，接下来我们就来看一下 Cesium 是如何使用的，这也是我们本节课的重点内容。
2025-12-06 13:52:07
982
原创 Cesium快速入门0：认识Cesium框架
新人注意：它用 WebGL 实现，跨平台三维图形渲染，只要设备能装现代浏览器就能跑，Windows、Linux、手机浏览器全支持。GIS 开发工程师、空间数据分析师、地理信息软件公司、GIS 项目经理、地图与空间可视化，以及智慧城市、前端转政企项目等。它可以在浏览器里展示高质量的地球场景、三维模型、遥感数据以及三维地理信息。前端友好：Vue、React、Angular 都能直接嵌入。开源：国内外用得多，插件丰富，空间数据格式几乎全支持。- 气象数据：云图、台风、气旋实时图层。说了这么多，赶紧学起来。
2025-12-06 01:13:54
163
原创 制作一款打飞机游戏87：最后冲刺
：不用进Hyper模式也能引爆，爆炸范围更大且自带4倍分数加成。Christian边调试边吐槽："这炸弹得够特别才行！"最后给炸弹加了全屏白光+虹膜收缩特效，还让道具自动吸附过来。
2025-08-07 13:34:16
4514
原创 制作一款打飞机游戏86：分数
让我们快速过一下游戏玩法内容。经过90集后，我们终于要实现计分系统了——这告诉你游戏制作中它的优先级有多高。说实话，我也不知道为什么现在才是实现它的合适时机。需要记住的是，编程本身（包括计分系统）并不困难，真正的挑战在于如何让它正常工作以及平衡性调整——这才是最难的部分。今天我们要实现的是游戏的核心计分机制。先简要说明我们要实现的内容：目前游戏中已经有了一些得分方式——击落敌人可以获得分数，近距离击落敌人能获得更多分数。
2025-08-06 13:09:24
331
原创 制作一款打飞机游戏85：Hyper模式
return base_dmg * hyper_mult -- Hyper伤害加成(默认1.5倍)fill_pattern = random(6,7) -- 在灰色和白色间随机闪烁。charge_threshold = 200 -- 进入Hyper模式的阈值(最大充能值的一半)charge = charge - charge_threshold -- 消耗一半充能。spawn_star() -- Hyper模式下掉落星星。debug_print(charge) -- 在屏幕上显示当前充能值。
2025-08-05 13:03:04
310
原创 制作一款打飞机游戏84：游戏视觉优化
我们需要在玩家近距离击杀敌人时，通过视觉提示明确告知玩家获得了2x/3x/4x的分数加成。：玩家关注游戏玩法，但开发中大部分时间花在基础视觉呈现上。：使用精灵图代替动态绘制文字，牺牲少量显存换取更好的性能表现。"游戏永远不会真正完成，只会被发布" - 我们需要在完美主义和实际发布之间找到平衡点，避免项目陷入无限优化的泥潭。我们通过倍数提示和燃烧效果，让玩家直观感受到自己的操作成果。当大型敌人生命值低于炸弹伤害值时，我们使其进入"燃烧"状态，为玩家提供明确的视觉提示。
2025-07-30 12:32:50
401
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人