案例讲解
380 个 WebGL / Three.js / Cesium.js 案例，每篇按 效果说明 → 核心概念 → 实现步骤 → 代码要点 → 源码 的结构讲解。在线运行与完整源码见 three-cesium-examples。
本分类案例均已对照 three-cesium-examples 源码生成精讲文档。
推荐学习路径
| 阶段 | 目录 | 说明 |
|---|---|---|
| 1️⃣ 入门 | Three.js 入门案例 | 15 篇：Scene / Camera / Renderer、几何体、动画循环 |
| 2️⃣ 基础 | Three.js 基础案例 | 模型加载、阴影、控制器、后期处理入门 |
| 3️⃣ 进阶 | 着色器 · 粒子 · 后期 | 自定义 GLSL、特效合成 |
| 4️⃣ 地球 | Cesium 基础 · 图层 | Viewer、Entity、3D Tiles、影像地形 |
| 5️⃣ 实战 | 应用场景 · Cesium 应用 | 智慧城市、飞线、导航等完整场景 |
每篇案例文末标注所属分类；入门系列建议按顺序阅读，其余可按兴趣跳转。
Three.js (301)
首页导航 (5)
着色器 (89)
- 城市光效
- 草地着色器
- 2025
- 音乐可视化
- 1000stars留念
- 城市混合扫光
- 海面
- 中国旗帜
- 圆波扫光
- 围墙着色器
- 透明渐变
- 围栏着色器
- 爱心
- 城市混合Shader
- 科技风地面
- three.js Logo
- 波涛海浪
- 警告信息
- 点星感谢
- 智慧城市扫光
- 城市光影
- 音乐舞动
- 着色器天空
- 模型混合着色器
- 平面扫描
- 城市线条
- 扩散圆墙
- 雷达着色器
- 蜡烛
- 环形着色器
- 圆泡吸附
- 雷达扫描
- 颗粒图像
- 高斯模糊
- 网格着色器
- 罗盘
- 半圆
- 扭曲
- 环彩虹着色器
- 视频着色器
- 蒸汽波太阳
- 毛玻璃
- 无限网格
- 蛛网箱子
- 跳动的心
- 栅格网格
- 流光
- 灰度
- 图像波动
- 溶解
- 切换ShaderToy
- 波浪效果
- 浮雕图像
- 花
- 溶解动画
- 图片抖动
- 心
- 方块着色器
- 火球效果
- 一团揉动
- 旋转的圆
- 着色器光效
- 白云
- 水天一色
- 天空云
- 乌云
- 细胞
- 蘑菇
- 马赛克
- 着色器行星
- 魔幻山体
- 柔光
- 地球扫描
- 波扫描
- 内发光
- 火焰
- 发散着色器
- 幻影花烟
- 鱼
- 能量球
- 网格地板
- 全息投影
- 燃烧烟雾
- 火焰材质
- WiFi
- 建筑渐变
- 冰面
- 黑洞
- 等高线
粒子 (27)
- 优雅永不过时
- 随机粒子效果
- 粒子效果的行星
- 粒子泡泡
- 粒子混合着色器
- 粒子聚散
- 下雪
- 星系
- 粒子地球
- 波浪粒子
- 粒子线条
- 球体线条
- 粒子线
- 粒子烟花
- 粒子星空
- 科技粒子
- 鼠标轨迹粒子
- 文字采集成粒子
- 雪花
- 图片粒子
- 粒子火焰
- 真实火焰
- 地球粒子
- 发散粒子
- 水流粒子
- 喷泉水流
- 蒸汽粒子
游戏复刻 (3)
应用场景 (68)
- 优雅永不过时
- 魔法阵
- 代码云
- 鬼屋
- Canvas贴图
- 贴图飞线
- 飞线效果
- 管道流动
- 建筑线条
- 模型视频材质
- 精灵文字
- 简单碰撞检测
- 发散飞线
- 灯罩
- 烟雾效果
- 亮光标记
- 简单3d拓扑图
- 3D饼图
- 绘制面
- 绘制面_内置点
- 道路流光
- 模型导航
- 程序化地形生成
- 测量
- 数学公式应用
- 球体文字
- 矩阵操作
- 咖啡
- 光柱
- 贴图网格地面
- 花瓣雨
- 第一人称房屋
- 扩散半球
- 新年快乐
- 风吹动画
- 图片移动
- VR 全景视频
- 自定义网格
- 表情
- 流动围栏
- 等值线
- 管道表面运动
- 视频碎片
- 绘制围栏
- 朋克风
- 雷达扫描
- 生成模型底座
- 圆锥网格
- 视频地板
- 下雨效果
- 具有物理效果的卡通海面
- 红玫瑰
- 采样波
- 精灵火花
- 无限行驶
- 模型热力图
- 几何合并
- 测量
- 时间轴动画
- 3D贪吃蛇
- 模型边框
- 模型粒子化
- 动态管道
- 网格材质
- 跳跃动画
- 点云第一人称漫游,碰撞检测
- 风力涡轮机尾迹
动画效果 (15)
- animejs使用
- gsap使用
- Theatrejs
- 动画合集
- 裁剪动画
- 第一人称漫游控制
- 点击第三人称移动
- 第三人称移动
- 模型拆解动画
- 第一人称移动
- Mesh变换动画
- 曲线动画
- 下钻动画
- 卷曲动画
- 巡检
物理应用 (2)
扩展功能 (19)
- 本地模型加载
- IndexedDB使用
- 加载3dtiles
- 3D地图
- 分级地图
- 地理边界
- 3D热力图
- 热力图
- 模型热力图
- 模型反射效果
- 多浏览器窗口连接
- Echarts结合
- 柱状图
- 高斯溅射
- 高斯sparkjs
- 瓦片地图
- D3 svg与Three
- 多视图
后期处理 (10)
基础案例 (35)
- 人物模型动画案例
- gltf/fbx/obj模型加载
- 模型阴影
- 天空盒
- 相机属性
- 轨道控制器
- 创建场景
- 模型天空
- 场景雾化
- Opt解压(su7 模型)
- 加载动画
- 轮廓光
- 三维转屏幕坐标
- 渐变三角形
- 扩散圈
- 材质修改动画
- 拖拽控制
- 变换Box3
- 单/多模型动画
- GSAP动画
- 精灵标签
- 模型视图
- CSS元素
- DOM遮挡
- 相机动画
- 截图
- 骨骼动画
- 视图辅助
- 帧率控制
- 渲染贴图物体
- 场景剪切-后处理
- 多轮廓光
- 渲染器配置
- 模型导出
- 文件分片(打包zip)
入门案例 (15)
相关工具 (13)
- sketchfab免费模型
- 开源shader社区
- 免费hdr全景图资源
- gltf在线draco压缩工具
- hdr制作天空盒
- 字体转Three使用json字体
- Webgl直接可用Shader
- Shader编辑器
- geojson获取工具
- 图片生成3D模型
- 制作人物动画
- gltf模型查看器
- 高斯点云编辑器