OSM+three.js打造3D城市

对于我在 Howest 的研究项目，我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中，随后我将对其进行动画处理。

一、开发环境

为了使用 Node 和 npm 包，我选择使用 Vite.js。 Vite 是一款构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。 它由两个主要部分组成：

• 开发服务器提供比本机ES 模块丰富的功能增强，例如极快的热模块替换(HMR)。
• 将代码与Rollup 捆绑在一起的构建命令，预先配置为输出高度优化的静态资源以用于生产。

选择 Vite 是因为我过去在一些 Vue.js 项目中使用过它，因此对它很熟悉，事实证明它快速且可靠。鉴于其受欢迎程度，Three.js 被选为该项目的首选框架，因为这种受欢迎程度催生了大量的文档和教程。

因为我希望以后能够将这个研究项目集成到我自己的网站中，所以我决定将其开发为 npm 包。 这涉及到制作两个独立的项目——第一个用于实际的 3D 应用程序，另一个用于实现该应用程序的测试网站。

在项目文件夹中，npm init 命令用于创建 package.json 文件，其中包含包的元数据，例如名称、版本、依赖项、入口点和其他信息。 Index.js 将作为包的入口点，其中 src 文件夹包含代码，示例文件夹包含默认资源。

计划是将功能拆分为单独的 JavaScript 模块，以提高清晰度和可维护性，最终被初始化、全局、城市、动画和路径。

二、初始化模块

从初始化模块开始。 initialize() 函数创建并配置场景、相机、灯光和渲染器对象࿰