Three.js三维城市可视化geojson建筑，外部公共面分离

最新推荐文章于 2025-10-31 21:22:15 发布
原创 最新推荐文章于 2025-10-31 21:22:15 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#大数据

本文探讨了在使用three.js或mapbox进行三维城市建模时，由于公共面导致的渲染闪烁现象。通过分析L形建筑的轮廓，揭示了geojson结构重合是造成闪烁的原因。解决方案是将重叠部分分离，确保每个建筑物的几何形状独立，避免公共面。示例展示了分离后建筑物不再闪烁的效果，强调了正确处理几何数据对于高质量渲染的重要性。

 演示 https://www.bilibili.com/video/BV11i4y127Fx/ 
有过mapbox或three.js 三维城市开发的同学可能会遇到这个问题 “外部公共面在渲染时出现闪烁”。如图黄色和白色之间存在闪烁。黄色和白色之间有穿透。

建筑物左侧面出现闪烁 
建筑物在渲染时出现闪烁，这是什么造成的？先看这个L沙发型建筑物的轮廓分析图


如果geojson的结构是重合的，在用three.js或mapbox渲染时就会出现闪烁。如果分离后则正常。

geojson建筑物轮廓分离后，不再闪烁
示例2 多层沙发型建筑物，上、下、右都存在公共面（红色椭圆），需要分离开。


分离后建筑物轮廓

分离后建筑物轮廓


分别设置高度后 在渲染时没有闪烁

geobuilding
关注
Three.js项目实战之数据可视化
天涯学馆
09-29 665
我们使用D3.js计算数据的最大值和比例尺，然后根据比例尺为每个数据点创建一个柱状图。上面加载了一个GeoJSON文件，将其转换为Three.js的几何形状，并使用基本材质创建了一个3D网格。在Three.js中实现数据可视化，可以将二维数据转化为三维图形，以便更好地理解和探索数据。在Three.js中实现更复杂的数据可视化，可以结合其他数据处理库，如D3.js，以及自定义的几何形状和颜色映射。当鼠标悬停在柱状图上时，显示该柱子对应的数据值。我们可以根据数据值映射到不同的颜色，以增强数据表达的直观性。
【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图
03-29 2219
在本文中，我们将使用日本新宿站的室内地图数据，并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在。
ThreeJS读取GeoJson文件，绘制地图板
YOOSHIN的博客
05-10 3146
从网上大神那儿找来的代码，稍微修改了一下，ThreeJS感觉好难用，文档写的太简单了，不好下手 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>3D</title> <link href="./...
ThreeJS-geoJson-开发记录
yichen454的博客
01-01 2626
使用墨卡托投影将geoJson经纬度数据转为平面坐标数据，进而使用threejs ExtrudeGeometry生成所示地图三维模型 主要技术点 三维渲染 threejs 数据转换 d3-geo 变换代码 const projection = geoMercator().center([104.0, 37.5]).scale(36).translate([0, 0]); center: 中心经纬度 scale: 转换后坐标缩放系数 translate：转换后平移量 功能点 简单光效 自主材质调节（演
大前端可视化实战：用 ECharts+Three.js 实现 3D 数据看板，从 0 到 1 的开发笔记
最新发布
2501_93878496的博客
10-31 329
通过 ECharts 的丰富图表能力与 Three.js 的 3D 渲染结合，可构建出深度交互的沉浸式数据看板，适用于智慧大屏、实时监控等场景。：对相同形态的 3D 标注点使用。
three.js 使用geojson ，实现中国地图区域，边缘流动效果
10-18 2239
three.js 使用geojson ，实现中国地图区域，边缘流动效果。
Three.js渲染GeoJSON.zip
07-13
Three.js渲染GeoJSON
加载geojson面数据_three.js加载geojson
weixin_34025386的博客
01-15 2208
three.js可以加载geojson来绘制面，再根据绘制的面拉伸成体。效果图：预览地址：vue3+TS​123.56.85.24vue3项目中集成three.js可以看这篇文章:清风皓月：three.js实践指南​zhuanlan.zhihu.com一.Geojson是什么？GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Objec...
ThreeEarth:Three.js实现的简单三维GIS。（放弃）
05-15
4. **3D GIS概念**：3D GIS是一种结合了地理信息系统与三维可视化技术的方法，能够提供更直观、立体的地理空间信息展示。ThreeEarth通过Three.js实现，可以展示地形、建筑物、道路等地理元素，并支持交互操作，如...
基于Three.js与GeoJSON的三维地图可视化实现
本文围绕“Three.js+GeoJSON三维地图[项目源码]”这一主题，深入剖析其背后所涉及的核心知识点，涵盖从数据结构解析到前端渲染、坐标转换、三维建模、交互设计等完整流程，帮助开发者全面掌握基于WebGL的地理信息三...
Threejs GeoJSON离线3D地图
06-13
Threejs GeoJSON离线3D地图
three-geojson-geometry:ThreeJS几何体可在球体上绘制GeoJSON对象
04-27
ThreeJS GeoJSON几何 ThreeJS几何类，用于在球体上抚摸GeoJSON对象。 快速开始 import { GeoJsonGeometry } from 'three-geojson-geometry'; 或者 const { GeoJsonGeometry } = require('three-geojson-geometry'); 甚至 [removed][removed] 然后 const myLine = new THREE.Line( new THREE.GeoJsonGeometry(geoJson), new THREE.LineBasicMaterial({ color: 'blue' }) ); API参考 建设者 GeoJsonGeometry （ geoJ
中关村建筑.geojson
06-15
中关村建筑矢量文件。从OSM 原始数据导出的建筑边界数据。有一定的使用价值，数据覆盖范围大小为一平方公里左右。
geojson-3d:3D 中的 GeoJSON 和 TopoJSON，使用 Three.js
06-12
Maptime 阿姆斯特丹 #6：GeoJSON 3D！ 使用在浏览器中以 3D 形式显示 GeoJSON。 为。 使用git clone https://github.com/maptime-ams/geojson-3d.git克隆本教程，在项目目录中运行 web 服务器（例如python -m SimpleHTTPServer ），并打开 。 编辑以调整本教程中使用的灯光、材质和相机。 源代码中包含一些基本的 Three.js 材料。 您可以在addFeature函数中设置特征的材质。 用法 使用 ，您可以从 URL 加载 GeoJSON 或 TopoJSON 文件，并使用 Javascript 函数（就像 D3）设置特征样式。 简单的函数，总是返回相同的颜色： function ( d ) { return '#0ef1f4' ; } 简单的函数，总是返回相同的颜色：
湘江新区geojson建筑物屋面数据
06-28
这是geojson面数据，数据为长沙市湘江新区岳麓区部分建筑物屋面数据
THREE.geojson:将 geoJSON 转换为 3D 网格结构
06-05
三.geojson 将 geoJSON 转换为 THREE.js 3D 网格结构 该脚本将一组 geojson 多边形转换为 THREE.js 几何图形。 整个脚本仍然非常具有实验性。 如何 看看这些例子。 这里有更多关于变量的信息： //Turn off console output var log = true ; //geoJSON file to load var jsonFile = "../data/einwohnerdichte2013_mini.geojson" , //if you want to extract height information from an additional attribute useHeight = true , //name of the attribute heightAttr = "EW_HA2013" , //
加载geojson面数据_three.js结合geoJson绘制中国地图
weixin_39650139的博客
12-31 2996
我们看最终实现的效果中国地图3Dindex​aflies.github.io1、准备工作 对threejs有基本的了解 了解geojson2、撸代码 我们使用面向对象的方式写代码，先定义一个ChinaMap类,最后new一个实例出来，调用init方法。threejs的三要素Scene,Renderer,Camera就不多重复了，中间的控制使用OrbitControls，光照使用...
【THREE.JS学习（3）】使用THREEJS加载GeoJSON地图数据
yuelizhe4774的博客
02-23 6268
Three.js中的坐标系是以单位为米（m）的坐标系，而在地理数据中，如Geojson使用的是经纬度作为坐标系，所以在使用、加载的过程中需要对数据进行坐标转换，才能够正确的显示地理数据。和mapbox、cesium之类的webgis加载数据不同（原理差不多），不能直接加载json数据，然后直接显示，需要我们对Json数据进行解析，然后按照一定的方式来生成图像。其中，{OrbitControls}为控制器，加载后可以通过鼠标来移动加载数据的方向、放缩等。接着，对加载的文件进行处理。STEP 3：开始渲染。
Three.js+GeoJSON实现三维地图显示
热门推荐
damadashen的博客
08-07 1万+
Three+GeoJSON实现对地理坐标转换并生成中国三维地图。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值