Threejs加载城市建筑物地图

视频教程链接：Threejs杭州3D建模（建筑物，道路，河流，发光，标语）炫酷效果

腾讯课堂链接：https://ke.qq.com/course/6035106#term_id=106266474

1.首先，需要下载两个软件（blender，qgis）

然后，下载一个blender插件：blendergis

可以在github上下载这个插件：

https://github.com/blendergis/BlenderGIS

下载完成之后，不要解压缩。

在blender中，选择上方编辑->偏好设置->插件，点击安装，选择你下载的压缩包。一定要勾选上插件前面的方框。

安装完成之后，就会在上方出现这样一个按钮。地理信息系统或者blendergis

那blendergis使用过程中可能会出现一些问题。比如加载地图的时候，显示No Imageio，那这个问题，网上有很多解决方法。或者出现一个灰色图，或者显示找不到位置。这些问题可能是因为你没有进行科学上网。或者blender和blendergis版本不匹配。大家可以在淘宝上花几块钱让商家帮你搞定。购买前，先询问一下，是否能解决你遇到的问题。

那这里将杭州建筑物的shp导入到qgis中，然后，右键->导出->要素另存为

然后，选择文件路径。这里CRS一定要选择3857，墨卡托投影。因为我们blender里面只支持这个类型。

然后，将转换好的shp文件导入到blender中。

这里，勾选从属性字段提取，基面向下取整或者是floor，这个代表楼层数。也就是说它会根据楼层高度加载建筑物高度

导入完成之后，可以把它z轴的缩放调大一点

然后就可以把他导出出去，这里我们选择导出为.glb文件，勾选压缩可以使加载速度更快

然后，来到我们脚本里面，

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
const loader = new GLTFLoader();
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/draco/");//draco文件夹路径
  loader.setDRACOLoader(dracoLoader);
  let res = await loader.loadAsync("/model/xxx.glb");
scene.add(res.scene)，

就可以将模型添加到我们场景当中了。