一句话概览：three.js 是通用三维渲染库，不算地图库：它负责场景、相机、材质、光照与几何，不负责地理坐标和瓦片。把经纬度投影到局部平面坐标后，可以用它做三维体块、点云、轨迹与自定义着色器效果。
教程13 篇
动画系统
three.js 有两套动画方式：模型自带的关键帧由 AnimationMixer 播放， 代码驱动的位移、旋转、透明度变化…
02第一个场景：场景、相机与渲染器
three.js 是一个通用的三维渲染库，负责把几何体、材质和灯光画到 WebGL 画布上。 它不提供地图、投影、瓦片或地理…
03相机与控制器
相机决定看到什么，控制器决定怎么移动。三维 GIS 场景里， 这两者的默认值几乎都要改：俯仰角、缩放范围、拾取射线都依赖它们…
04社区精选资源
three.js 的官方示例比多数第三方教程更完整，很多问题在示例源码里已经有标准答案。 这一页把官方示例、手册、生态项目与…
05自定义着色器
材质参数不够用时，直接写着色器。three.js 已经把相机矩阵、顶点属性准备好了， 只需要接管颜色计算这一段，不必从零搭…
06与地理数据结合
three.js 不认识经纬度。地理数据要进入三维场景，必须先回答三个问题： 用球面还是平面、一米等于几个场景单位、原点放在…
07几何体与缓冲
内置方块和球体只是方便，真实地形、建筑轮廓、点云都要自己往缓冲里写数据。 理解顶点属性与索引的关系，比记住某个几何体构造函数…
08性能与实例化
一万棵树画不动，通常不是三角形太多，而是一万次绘制调用的开销。 把相同几何的重复对象合并成一次绘制，是最直接也最有效的优化。
09材质与光照
材质描述表面如何与光交互，灯光提供光。地形有没有立体感、数据分层的颜色准不准、 模型会不会发灰，基本都由这两组参数决定。
10模型加载
建筑、设备、桥梁这些精细内容通常来自建模软件，不会用代码拼出来。 three.js 读取 glTF 最省事，但尺寸、朝向、原…
11后处理
后处理把渲染结果当成一张图片，再叠加几道处理。它适合统一画面质感， 但也意味着每一道工序都是一次全屏渲染，链路越长越费。
12场景图与坐标
场景里所有对象都挂在一棵树上，子对象的位置是相对父对象表达的。 理解这棵树，才知道为什么改了坐标却没动、移动了组却带动了一片…
13纹理与贴图
纹理决定表面看起来是什么。颜色偏了、图案重复了、远处糊成一片， 原因通常不在材质颜色，而在纹理的颜色空间与采样设置。
API 文档45 个
使用示例65 个
动画混合
两条片段分别驱动上臂与小臂，两个权重滑杆决定各自的影响比例。
查看示例
坐标轴
three 默认 Y 向上，GIS 习惯 Z 向上。这页把东、北、天三个方向摆进场景， 并给出要素坐标 (E, N,…
查看示例
批量线段
一张八十五乘八十五的路网，横向纵向各一段，共三万四千个线段。 全部塞进一个缓冲，一次绘制调用画完，拖动滑杆可以按比例…
查看示例
航线漫游
一条绕行场景的闭合航线，机位高度随位置起伏，视线在四个兴趣点之间过渡。 进度条可以手动拖到任意时刻，暂停后相机控制权…
查看示例
对数深度缓冲
五个标尺站按数量级排开，最近的五百米，最远的二百万米。 相机近平面 0.5、远平面五百万，跨度如此之大，普通深度缓冲…
查看示例
柱状图
十八乘十八的阵列上立起三百二十四根柱体，高度来自三个高斯峰叠加的密度场， 拖动倍率滑杆，整片柱体随之伸缩。
查看示例
飞行控制
九十栋塔楼散落在三百米见方的场地上，用键盘推着相机在其中穿行。 速度可调，鼠标拖拽改变朝向，左下角常驻一份键位说明。
查看示例
地图式控制
一整套街区在俯视角度下摊开，左键拖动是平移而不是旋转， 滚轮缩放、右键改朝向。倾斜滑杆能把视角从正俯视压到七十度。
查看示例
第一人称漫游
一条两侧排满建筑的主街，点击画面锁定指针，用 WASD 贴地行走， 按住 Shift 加速，按 ESC 交还鼠标。视…
查看示例
HTML 标注
一个带经纬网的地球，十六个城市标注用 div 渲染，字号、圆点、描边全部来自 CSS。 旋转时标注跟着球面走，背面的…
查看示例
旋转立方体
一个持续自转的立方体，包含场景、透视相机、渲染器、两盏灯与基础材质。 整个页面只有这一段模块脚本，没有构建步骤。
查看示例
高程着色网格
地形网格按海拔逐顶点上色，右侧是同步绘制的色带图例。 平滑渐变与六至十二级分层设色可以随时切换，这是专题制图里最常见…
查看示例
动态几何更新
八十一乘八十一的网格，每帧把顶点高度全部重算一遍，再刷新法线与顶点色。 画面是同心波加交叉波纹，右下角实时显示帧率。
查看示例
建筑轮廓拉伸
每个地块的平面轮廓是一圈带圆角的闭合路径，沿竖直方向拉出高度就成了体块。 这是把二维面要素变成三维城市模型最直接的路…
查看示例
高程色带查找
色带不再写进顶点，而是压成一张 256 × 1 的一维纹理。 顶点只带一个归一化高程值，片元着色器按这个值采样配色，…
查看示例
多边形要素
一块带内部空洞的面要素和一座独立小岛，全部由代码生成的环坐标构造。 三角剖分按钮能看清 three.js 如何把带洞…
查看示例
道路走廊
一条穿越起伏地面的空间曲线，配上一个矩形断面，沿曲线挤出后就是连续的道路体。 拖动弯曲度会重建几何体，中心线按钮可以…
查看示例
地球球体
一个带经纬网的球体，纹理由 Canvas 逐像素生成，北京、上海、广州三个坐标按经纬度落在球面上。 这个示例把「经纬…
查看示例
实例化渲染
两千多栋楼共用一份几何体，一个绘制调用画完，与逐个 Mesh 的写法并排对比。
查看示例
实例化图标
一千五百个带圆角的图标漂浮在地表上方，始终正对镜头。 点一下锁定朝向，就能看到面片固定后的样子，可用来验证公告板是否…
查看示例
动态实例化
六十四乘六十四根柱子，共享同一份几何体。每帧按行波相位改写实例矩阵， 画面出现从中心向外扩散的起伏，颜色按初始高度分…
查看示例
实例化拾取
六十四乘六十四的方块阵列，鼠标扫过时被指到的那一个变成琥珀色。 点击可以把高亮锁定，再点空白处解除，左下角给出实例序…
查看示例
实例化散布
六千棵树散布在一片起伏地形上，按同一套高程函数落位，所以树根都贴着地面。 显示数量可从五百调到六千，重新分布会打乱位…
查看示例
线要素拾取
一张三千多段的线网，鼠标接近哪一段，哪一段就被琥珀色覆盖， 左下角列出这段的两个端点平面坐标。阈值滑杆控制松开到什么…
查看示例
点云拾取
两万个三维散点分属三处采样区，鼠标靠近时用一个绿色圆环圈住最近的那一个， 并读出序号与世界坐标。阈值滑杆把「多近算命…
查看示例
光照对比
四个球并排，材质从左到右依次是 Basic、Lambert、Standard、Physical。 切换灯光方案，能直…
查看示例
物理光照
三盏功率完全相同的点光源，分别挂在 2.5、6、11 个单位的灯杆上。 地面出现三个亮度差异巨大的光斑，左下角把照度…
查看示例
聚光灯
一盏灯从高处照向地形，锥角决定光斑大小，半影决定边缘软硬。 灯头会缓慢绕圈，光斑跟着在坡面上滑动，阴影也随之变形。
查看示例
分级色线
九百个点的环形轨迹，按分段速度从冷蓝渐变到暖橙。 颜色写在每段两端的顶点上，由材质插值，右下角给出同源色带。
查看示例
虚线边界
三个闭合环加一条贯穿路径，全部用虚线绘制。实段与空段的长度可以拖动调整， 这是制图里区分行政界、保护界与临时管控区最…
查看示例
粗线管网
十四条空间折线构成的管网，线宽以屏幕像素计，从 1 到 14 像素自由调整。 打开流动虚线后，虚线相位持续推移，用来…
查看示例
粗线拾取
八条管线在空中交错，鼠标靠近哪条，哪条就变成琥珀色并加粗。 左下角显示命中的管线编号与到相机的距离，每条线的起点还有…
查看示例
LOD 分级
同一座山体做了三档：细分五级、二级、零级。相机拉近自动换高模，推远换低模， 左上角实时显示当前层级、三角形数与相机距…
查看示例
Canvas 纹理
一张 512 见方的地块底图在浏览器里画出来：四乘四格、道路十字、建筑基底。 它被平铺到整片地面，平铺次数从一到八可…
查看示例
置换地形
一块二百六十段见方的平面，颜色与高度全部来自两张贴图。 两张图都是代码画出来的：一张存高度，一张存带等高线的配色。
查看示例
定向包围盒
一栋 5 × 3 × 9 的长条建筑，转到 38 度后，轴对齐包围盒明显胖了一圈。 橙色是 AABB，蓝色是跟着建筑…
查看示例
模型旋转
代码拼出一栋楼，拖拽时转的是模型本身，转盘与地面保持不动。
查看示例
多相机
同一份场景渲染四次：鸟瞰、正交俯视、平视与长焦特写，共用一块画布。
查看示例
多画布同步
两个独立画布并排，共用一份场景与一批建筑。 左侧是自由视角，右侧固定俯视，旋转建筑时两边同步，用来核对布局与朝向。
查看示例
四视图
左上透视、右上俯视、左下正视、右下侧视，四个视口共享同一块画布与同一个场景。 拖动左上角的视图，另外三个正交视图会同…
查看示例
轨道控制
拖拽旋转、滚轮缩放、右键平移，全部围绕同一个目标点。 阻尼、自动旋转、距离与极角限制都可以在现场切换。
查看示例
粒子系统
九千片雪花在一个 18 × 14 × 18 的空间里下落，越界后回到顶部重新开始。 位置属性每帧改写一次，是动态缓冲…
查看示例
性能对比
同样的五千个立方体、同样的位置与朝向，分别用五千个 Mesh 与一个 InstancedMesh 绘制。 绘制调用从…
查看示例
点云散点
两万四千个点聚成一块扁椭球，颜色由高度决定。这是点云、站点分布、采样数据的共同画法： 一份位置属性，加一份颜色属性。
查看示例
点精灵公告板
6000 个设施点按极坐标散布，每个点用一张代码画的径向渐变贴图渲染。 无论相机怎么转，这些圆点都正面朝向视线，这是…
查看示例
自定义属性点云
三万个采样点除了位置，还带 aSize、aTint、aPhase 三条自定义属性。顶点着色器决定点在屏幕上的像素大小…
查看示例
点云分块绘制
20 万个高程采样点一次性写进缓冲，再用 setDrawRange 逐块放开。 拖动滑杆可以看到点数与画面的关系，重…
查看示例
泛光
十六个自发光几何体围成一圈，亮度超过阈值的部分向外扩散。 强度、半径、阈值三个滑杆分别控制光晕的浓度、范围与触发门槛…
查看示例
后期处理
把场景先渲染到纹理，再叠加泛光与色调映射，观察高亮区域如何向外扩散。
查看示例
描边高亮
十八栋楼围成一圈，鼠标指到哪栋，哪栋就多一圈琥珀色轮廓。 被前面物体挡住的那段描边会变暗，仍能看出完整的轮廓形状。
查看示例
环境光遮蔽
三十四个体块挤在一片地面上，墙角、体块之间的缝隙明显变暗。 「仅遮蔽」按钮把画面切到纯遮蔽结果，能直接看出算法在哪些…
查看示例
体积光散射
三层山脊挡住低角度的太阳，光束从山后透出。 效果由一段自定义着色器完成：从每个像素出发，沿指向太阳的方向逐步采样并累…
查看示例
射线拾取
六十个站点悬停即高亮，单击落到地面并读出世界坐标，两种拾取方式一键切换。
查看示例
贴图坐标拾取
地面是一张八乘八的地块贴图，由 canvas 现场绘制。点击任意位置， 能同时拿到 UV、贴图像素坐标与地块编号，并…
查看示例
阴影
两排楼体在同一盏平行光下投出长短不一的影子，工具栏可切换类型、分辨率与偏置。
查看示例
点光源阴影
八根柱子围成一圈，中央一座方台，点光源悬在外侧缓慢绕行。 影子从每根柱子的根部向外放射，方向随光源位置连续变化。
查看示例
阴影相机
平行光的阴影由一台正交相机生成，它的视锥就是阴影贴图能覆盖的范围。 把视锥画出来，能看到超出范围的建筑根本没有影子，…
查看示例
软阴影 VSM
一排高低不同的板与几根细柱，投影落在同一片地面上。 VSM 让影子边缘出现连续过渡，模糊采样数与半径可以分别调整。
查看示例
天空盒
六个渐变面拼成立方体背景，与球体穹顶、纯色背景一键切换，观察地平线的一致性。
查看示例
天空着色器
一整套大气散射模型被封装成一个球体，太阳高度决定天色从深夜蓝到夕阳橙。 十二根柱子投下的影子方向，会随太阳方位一起变…
查看示例
地形网格
一张 140 × 140 的规则网格，顶点沿高度函数抬升，颜色按海拔渐变。 同样的流程可以把 DEM 栅格变成可交互…
查看示例
地形拾取
鼠标划过起伏的地表，左下角实时显示命中的经纬平面坐标与海拔。 点击会在地面立一根标柱，用来验证屏幕坐标到世界坐标的换…
查看示例
纹理贴图
用 Canvas 画一张带方格网、等比线与注记的示意图，贴到地面平面上。 滑杆调整重复倍数，按钮切换包裹方式与配色。
查看示例
轨迹线
北京、上海、广州、成都、西安连成一条闭合航线，亮点沿曲线前进并拖出尾迹。 曲线在球面之上生成，避免与球体穿插。
查看示例
水面着色
一片一百二十米见方的水面，浪高与流速可调，七个浮标随波起伏。 整片水面没有任何贴图，深浅色、反射与高光全部在着色器里…
查看示例