如何用Mapbox GL JS打造3D城市建筑fill-extrusion与GLTF建筑模型完整实践【免费下载链接】mapbox-gl-jsInteractive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL项目地址: https://gitcode.com/gh_mirrors/ma/mapbox-gl-jsMapbox GL JS 是一款基于 WebGL 和矢量瓦片的高性能浏览器地图引擎它提供了两种打造 3D 城市建筑的核心能力fill-extrusion多边形拉伸建筑和model图层GLTF 三维模型。本文将带你用最少的代码快速掌握这两条 3D 城市建筑技术路线并教你通过灯光、阴影、夜景模式让城市立起来 ️两种3D建筑路线选哪条路线数据源适合场景fill-extrusion拉伸层矢量瓦片中的 building 图层含 height 属性城市级批量建筑、按数据着色、轻量通用model模型层GLTF/GLB 三维模型建筑、地标、树木地标建筑精细建模、品牌建筑、景观植被简单说批量城市肌理用 fill-extrusion精细地标和植被用 GLTF 模型。两者可以叠加使用互不冲突。fill-extrusion 快速上手四行配置立起城市fill-extrusion图层把矢量瓦片里的建筑多边形按高度值拉伸成 3D 体块。核心就四个属性map.addLayer({ id: 3d-buildings, type: fill-extrusion, source: composite, source-layer: building, minzoom: 15, paint: { fill-extrusion-color: white, fill-extrusion-height: [get, height], fill-extrusion-base: [get, min_height], fill-extrusion-opacity: 0.7 } });fill-extrusion-height建筑顶部高度单位米可绑定数据字段详见样式规范 src/style-spec/reference/v8.jsonfill-extrusion-base建筑底部高度可让建筑悬空或贴合地形minzoom: 15只在放大到一定程度时显示兼顾性能与体验仓库里可直接参考的完整示例是 debug/buildings.html它还演示了fill-extrusion-edge-radius圆角边缘、环境光遮蔽AO等进阶质感属性。调出真实城市感数据驱动颜色与灯光想让建筑不只是白色盒子把颜色改成数据驱动表达式即可——例如按建筑 ID 生成不同色相的 HSL 值整座城市立刻五彩斑斓。仓库示例 debug/buildings.html 中用random表达式为每栋楼生成随机色相效果非常出彩。配合倾斜视角pitch和自定义光源3D 城市才有光感map.setPitch(60)倾斜相机建筑立面才能被看见fill-extrusion-ambient-occlusion-intensity环境光遮蔽强度模拟楼角阴影fill-extrusion-vertical-gradient默认开启的立面垂直渐变让墙面下方略暗夜景模式同样只是换个配色方案深色建筑体 冷色路面城市灯光氛围一步到位。GLTF建筑模型model图层的完整配置当需要精细的建筑外观比如带幕墙、logo 的地标楼就轮到model图层登场了。配置分两步第一步在样式顶层注册模型资源models: { bmw-hq: https://你的域名/bmw-hq.glb, tree: https://你的域名/tree.glb }第二步添加 model 图层{ id: landmark, type: model, source: geojson-源, layout: { model-id: bmw-hq }, paint: { model-scale: [1, 1, 1], model-rotation: [0, 0, 45], model-color: #ffffff, model-opacity: 1 } }常用model-*属性一览完整定义见 src/style-spec/reference/v8.jsonmodel-id引用样式中注册好的模型model-scale/model-rotation/model-translation缩放、旋转、平移均可用表达式按 zoom 或数据驱动model-colormodel-color-mix-intensity给模型整体染色并可控制与原材质的混合强度model-emissive-strength自发光强度让地标在夜景中发光仓库中 debug/model.html 展示了树木模型叠加在拉伸建筑之上的完整配置包含model-rotation按数据匹配、model-scale随缩放级别指数增长等实用技巧。阴影与树木让城市更有生命给地图加上方向光和阴影后建筑会在地面投出长长的影子树木错落有致——城市瞬间有了呼吸感 仓库的集成测试 buildings-trees-shadows-casting 展示了 fill-extrusion 建筑 GLTF 树木 动态阴影的组合效果。实现上依赖 3d-style/render/shadow_renderer.ts 的阴影渲染管线配合setLights设置光源方向即可开启castShadows。性能优化与常见问题清单控制出现时机给 fill-extrusion 层设置minzoom避免低级别渲染海量建筑体高度动画技巧做缩放时建筑长高效果时优先用fill-extrusion-vertical-scale而非直接改 heightsymbol 锚定屋顶等功能要求 height 不随 zoom 变化模型数量GLTF 模型面数越高越吃 GPU大规模植被建议用低模 model-scale放大地形贴合实验性属性fill-extrusion-height-alignment: terrain可让建筑随坡地倾斜裁剪控制近距离建筑会被 front-cutoff 机制淡出裁剪相关渲染逻辑见 3d-style/render/draw_building.ts 与着色器 fill_extrusion_depth.fragment.glsl关键文件导航文件说明debug/buildings.htmlfill-extrusion 建筑 圆角 AO 完整示例debug/model.htmlmodel 图层 GLTF 树木模型示例debug/procedural-buildings.html3D 建筑/立面/地标开关与阳光控制演示src/style-spec/reference/v8.jsonfill-extrusion 与 model 属性完整定义3d-style/shaders/fill_extrusion_depth.vertex.glsl建筑拉伸与深度着色器3d-style/source/model_loader.tsGLTF 模型加载器test/integration/render-tests/model-layer/模型图层各类渲染测试图集掌握fill-extrusion与model图层这两块拼图再叠加灯光、阴影与数据驱动样式你就能用 Mapbox GL JS 在浏览器里搭建出从城市天际线到地标精模的完整 3D 世界 ️【免费下载链接】mapbox-gl-jsInteractive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL项目地址: https://gitcode.com/gh_mirrors/ma/mapbox-gl-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考