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

最新推荐文章于 2024-08-09 07:31:01 发布
最新推荐文章于 2024-08-09 07:31:01 发布
阅读量1.2k 收藏
点赞数
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geobuilding/article/details/124103914
版权

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

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


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

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


分离后建筑物轮廓

分离后建筑物轮廓


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

geobuilding
关注
加载geojson面数据_three.js加载geojson
weixin_34025386的博客
01-15 2049
three.js可以加载geojson来绘制面，再根据绘制的面拉伸成体。效果图：预览地址：vue3+TS​123.56.85.24vue3项目中集成three.js可以看这篇文章:清风皓月：three.js实践指南​zhuanlan.zhihu.com一.Geojson是什么？GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Objec...
【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图
03-29 1614
在本文中，我们将使用日本新宿站的室内地图数据，并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在。
ThreeEarth:Three.js实现的简单三维GIS。（放弃）
05-15
ThreeEarth Three.js实现的简单三维GIS。 演示图片
Three.js渲染GeoJSON.zip
07-13
Three.js渲染GeoJSON
使用three-geo构建地理三维地形
最新发布
gitblog_00907的博客
08-09 617
使用three-geo构建地理三维地形 three-geo3D geographic visualization library项目地址:https://gitcode.com/gh_mirrors/th/three-geo 1. 项目介绍 three-geo 是一个基于Three.js库的开源项目，用于实现Tile-based（瓦片式）的地理世界地图可视化。它可以创建3D地形表面，使用卫星图像...
ThreeJS读取GeoJson文件，绘制地图板
YOOSHIN的博客
05-10 2895
从网上大神那儿找来的代码，稍微修改了一下，ThreeJS感觉好难用，文档写的太简单了，不好下手 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>3D</title> <link href="./...
ThreeJS-geoJson-开发记录
yichen454的博客
01-01 2481
使用墨卡托投影将geoJson经纬度数据转为平面坐标数据，进而使用threejs ExtrudeGeometry生成所示地图三维模型 主要技术点 三维渲染 threejs 数据转换 d3-geo 变换代码 const projection = geoMercator().center([104.0, 37.5]).scale(36).translate([0, 0]); center: 中心经纬度 scale: 转换后坐标缩放系数 translate：转换后平移量 功能点 简单光效 自主材质调节（演
Threejs GeoJSON离线3D地图
06-13
Threejs GeoJSON离线3D地图
threejs-maps:使用 D3.js、Three.js 和 Mapbox 的交互式地图
06-27
"Threejs-maps"项目是结合了D3.js、Three.js和Mapbox这三款强大的JavaScript库，用于构建三维、动态且具有丰富交互功能的地图应用。本文将深入探讨这些工具如何协同工作，以及如何利用它们来创建令人惊叹的在线地图...
基于threejs的2.5D地图项目.zip
05-30
在当今的Web开发中，3D图形渲染已经成为一个不可或缺的元素，特别是在地图应用、游戏设计以及数据可视化等领域。Three.js作为一个强大的JavaScript库，为开发者提供了在浏览器中创建3D图形的便利。本项目"基于three...
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" , //
threegeo是一个基于threejs的地理可视化库
08-10
three-geo 是一个基于 three.js 的地理可视化库。 使用three-geo，我们可以通过简单地指定地球上任何地方的GPS坐标，轻松地近实时地建立卫星纹理的3D地形模型。 地形的几何形状基于Mapbox Maps API提供的RGB编码DEM（数字高程模型）。
加载geojson面数据_three.js结合geoJson绘制中国地图
weixin_39650139的博客
12-31 2621
我们看最终实现的效果中国地图3Dindex​aflies.github.io1、准备工作 对threejs有基本的了解 了解geojson2、撸代码 我们使用面向对象的方式写代码，先定义一个ChinaMap类,最后new一个实例出来，调用init方法。threejs的三要素Scene,Renderer,Camera就不多重复了，中间的控制使用OrbitControls，光照使用...
【THREE.JS学习（3）】使用THREEJS加载GeoJSON地图数据
yuelizhe4774的博客
02-23 5149
Three.js中的坐标系是以单位为米（m）的坐标系，而在地理数据中，如Geojson使用的是经纬度作为坐标系，所以在使用、加载的过程中需要对数据进行坐标转换，才能够正确的显示地理数据。和mapbox、cesium之类的webgis加载数据不同（原理差不多），不能直接加载json数据，然后直接显示，需要我们对Json数据进行解析，然后按照一定的方式来生成图像。其中，{OrbitControls}为控制器，加载后可以通过鼠标来移动加载数据的方向、放缩等。接着，对加载的文件进行处理。STEP 3：开始渲染。
Three.js+GeoJSON实现三维地图显示
热门推荐
damadashen的博客
08-07 1万+
Three+GeoJSON实现对地理坐标转换并生成中国三维地图。
three.js加载geojson矢量平面数据实现建筑物拉高成白膜
06-11
好的，针对您的问题，我可以为您提供以下的解答： 首先，您可以使用 Three.js 中的 `THREE.GeoJsonLoader` 加载您的 `geojson` 数据，并将其转换成 `THREE.Geometry` 对象。然后，您可以将这个 `Geometry` 对象传递给 `THREE.ExtrudeGeometry` 函数来实现建筑物的拉高。 接下来，您可以将 `ExtrudeGeometry` 对象传递给 `THREE.MeshBasicMaterial`，并设置其 `transparent` 属性为 `true`，以及 `opacity` 属性为 `0`，从而创建一个白色的膜。最后，您可以将这个白色的膜与您的建筑物 `Mesh` 对象一起添加到场景中，以实现建筑物的拉高成白膜的效果。 下面是一个简单的代码示例，演示了如何加载 `geojson` 数据并将其转换成 `ExtrudeGeometry` 对象，并将其与一个白色的膜一起添加到场景中： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 加载 geojson 数据 var loader = new THREE.GeoJsonLoader(); loader.load('data.geojson', function (geometry) { // 创建建筑物 Mesh 对象 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var building = new THREE.Mesh(geometry, material); // 将建筑物拉高成白膜 var extrudeSettings = {amount: 50, bevelEnabled: false}; var extrudeGeometry = new THREE.ExtrudeGeometry(geometry, extrudeSettings); var whiteMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0}); var whiteMesh = new THREE.Mesh(extrudeGeometry, whiteMaterial); // 将建筑物 Mesh 对象和白色膜 Mesh 对象一起添加到场景中 scene.add(building); scene.add(whiteMesh); }); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 希望这个解答能够对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值