绵阳高端网站建设,承德建设局网站,新闻系统网站开发dw实训总结报告,手机网站建设分析对于我在 Howest 的研究项目#xff0c;我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。
我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中#xff0c;随后我将对其进行动画处理 推荐#xff1a;用 NSDT编辑器 快速搭…对于我在 Howest 的研究项目我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。
我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中随后我将对其进行动画处理 推荐用 NSDT编辑器 快速搭建可编程3D场景 1、开发环境设置
为了使用 Node 和 npm 包我选择使用 Vite.js。 Vite 是一款构建工具旨在为现代 Web 项目提供更快、更精简的开发体验。 它由两个主要部分组成
开发服务器提供比本机ES 模块丰富的功能增强例如极快的热模块替换(HMR)。将代码与Rollup 捆绑在一起的构建命令预先配置为输出高度优化的静态资源以用于生产。
选择 Vite 是因为我过去在一些 Vue.js 项目中使用过它因此对它很熟悉事实证明它快速且可靠。
鉴于其受欢迎程度Three.js 被选为该项目的首选框架因为这种受欢迎程度催生了大量的文档和教程。
因为我希望以后能够将这个研究项目集成到我自己的网站中所以我决定将其开发为 NPM 包。 这涉及到制作两个独立的项目——第一个用于实际的 3D 应用程序另一个用于实现该应用程序的测试网站。
在项目文件夹中npm init 命令用于创建 package.json 文件其中包含包的元数据例如名称、版本、依赖项、入口点和其他信息。 Index.js 将作为包的入口点其中 src 文件夹包含代码示例文件夹包含默认资源。
计划是将功能拆分为单独的 JavaScript 模块以提高清晰度和可维护性最终被初始化、全局、城市、动画和路径。
2、初始化模块
从初始化模块开始。 initialize() 函数创建并配置场景、相机、灯光和渲染器对象从 DOM 中选择画布元素然后将渲染器附加到其上。 此外它还用于启用或禁用调试信息例如 FPS 计数器和 Axis 可视化工具。
然后该模块用于初始化 MapControls 并创建动画循环但更多内容请参见交互性部分。
这个 npm 包被称为 Storymap
3、创建管理页面
为了测试新创建的npm包是否工作使用了npm create vitelatest。
初始化一个单独的演示项目该项目将充当包的使用者。
为了在该项目中安装本地包使用 npm link 在演示的 node_modules 中创建了一个指向 Storymap 的符号链接。
该项目将用于创建和测试“管理”面板网络开发人员可以在其中为新的或更新的游览创建路径。
在index.html文件中创建canvas元素并将其添加到storymap的配置中后可以通过在终端中输入npm run dev并在浏览器中转到localhost:3000来开始测试我们在其中看到一个空的 Three.js 场景。
由于storymap包是符号链接的我们对其所做的更改将自动传播到演示项目因此可以保持演示项目运行并不断编写代码和测试更改从而实现高效的开发流程。
4、OSM数据
我最初计划使用 OSM Buildings 来获取数据但是我发现他们的文档已经过时我决定切换到 Overpass Turbo这样我就可以更快地开始开发并弄清楚如何使用 OSMB。 OSMB 使用 GeoJSONOverpass Turbo 允许将其数据导出到JSON格式。
GeoJSON 文件包含地图的各种元素例如由各种坐标和元数据数组表示的道路、公园、建筑物。建筑物具有轮廓、孔洞、剖面、高度或水平面以及许多其他属性。
建筑物及其元数据的示例模型
JSON 是一个不错的选择因为它在网络上的流行意味着对解析它的本机支持。 弄清楚如何使用 OverPass API 需要一些时间因为文档没有明确说明如何构建其查询语言并且使用它仍然具有挑战性。 你可以在下面看到最终的查询。
[out:json]
[bbox:{{bbox}}]
[timeout:30];(
way[building]({{bbox}});
relation[building][typemultipolygon]({{bbox}});way[highway]({{bbox}});
relation[highway][typepolygon]({{bbox}});way[naturalwater]({{bbox}});
way[waterlake]({{bbox}});
way[naturalcoastline]({{bbox}});
way[waterwayriverbank]({{bbox}});way[leisurepark]({{bbox}});
way[leisuregarden]({{bbox}});
);out;
;
out qt;5、OSM建筑渲染
建筑物的生成被分成城市模块。 它解析 GeoJson 文件来查找建筑物。 建筑物被表示为形成建筑物轮廓的多边形的纬度和经度坐标数组最终更多的多边形表示该形状中的孔就像一个内部花园或悬挑。
第一个重大挑战是由 JavaScript 本身以及 Three.js 中的坐标系引起的。 场景的中心由 0,0,0 表示离它越远就越不准确和不稳定这主要是由于 JavaScript 较差的浮点精度造成的。
GeoJSON坐标是全球经纬度坐标它们是大浮点数差异很小这加剧了精度问题。
因此有必要将全局坐标标准化为局部空间。 占据该区域的中心使用了一个名为 geolib 的第三方库
计算从中心到每个点的距离导致坐标标准化为原点具有更大的标准偏差。
显示相对于原点的坐标的网格
有了这些标准化数据我就可以创建 Three.js 形状和几何图形。 使用 Three.js 的内置功能我能够轻松地从轮廓上“打出”孔。 然后使用该几何体与材质一起创建网格然后将其添加到场景中。
由于three.jsXYZ 方向我还必须分别在 X 轴和 Z 轴上将其旋转 90 度和 180 度。 使用这种方法我现在有了一个非常平坦的城市的第一个版本。 为了使其成为 3D我使用了级别属性该属性表示楼层数乘以任意值来挤出这些形状。 浏览器中的城市
6、表演与互动
现在城市已经生成了一个问题出现了——性能很糟糕FPS 下降到个位数。 解决方案是将所有建筑物合并到一个大网格中而不是为每个建筑物生成单独的对象。 这种方法会产生副作用所有建筑物都会具有相同的材料但由于性能的大幅提高这是值得的。 此修复适用于后来生成的所有几何图形例如道路、绿地和水道
Web 开发人员需要能够加载和浏览整个区域并为游览路径设置路点。 这可以通过使用 three.js 的地图控件来实现。它是 3js 轨道控件的一个子集其工作方式与 Google 地图和其他流行的数字地图软件类似允许使用右键单击使相机围绕页面中心旋转并使用左键单击拖动相机。 它们在初始化模块中导入并初始化。 为了让它们工作它们需要更新每一帧因此它们被添加到动画循环中。
为了创建路径的路点你需要选择道路以及将 2D 鼠标坐标转换为 3D 空间的方法。 对于后者光线投射器可用于从鼠标位置向 3D 场景投射光线并查看与它相交的内容。 从那里你可以将其过滤为只能选择道路。
对于前者类似的技术也用于建筑物。 使用 Overpass Turbo 而不是 OSM Buildings 结果因祸得福因为 OSM 的 API 只提供建筑物的 GeoJSON所以我需要找到并实现一个额外的 API 来获取道路数据。
立交桥 API查询被调整为包括道路它们的坐标被标准化它们被生成并添加到城市模块中的场景中。 由于这座城市看起来单调乏味OverPass 还被用来获取绿地和水道的数据。
正在绘制的路径
路径模块用于实现 Raycaster 和其他必要的控件来绘制和导出路径。Three.js 内置了 Raycaster因此很容易实现。 它链接到一个 OnMouseMove 事件侦听器用于连续投射光线以显示是否用户是否选择了道路。
鼠标左键单击用于设置航路点具有各种键盘按钮负责保存、重置、撤消和重做功能。
路径导出到 JSON 数组中。 一旦开发者开始创建一条路径我需要让它跟随鼠标。 因此在单击之前路径的最后一个点链接到鼠标位置也使用 OnMouseMove 事件侦听器。
7、客户端
为了测试客户端实现我创建了一个新项目并以与管理项目类似的方式对其进行配置使用 vite 引导项目并使用 npm 链接安装 Storymap 包。 唯一的变化是这次场景不再占据整个页面而是占据了一半另一半用于显示有关兴趣点的信息。
对于客户端来说他们对交互的唯一控制是在浏览器中滚动。 他们不应该能够直接与 Three.js 场景交互就像用户无法与 Lucas 演示中的画布交互一样。
简而言之当客户端在浏览器中向下滚动时路径应该出现并从起始位置动画出来并在用户滚动到底部并且相机跟随时完成。
这是该项目最困难的部分之一。 显示路径计算方式的图表
总而言之路径被绘制为具有多个点的一个 Line 对象。 当用户向下滚动时最后一个点会不断更新使其看起来有动画效果。
为了获取该点的坐标将 getScrollPercentage() 函数附加到滚动事件侦听器并用于计算浏览器滚动位置。然后使用该百分比来连续操作选择哪对点作为起点和终点并使用 lerpVectors 函数在两者之间进行插值并计算当前路径的最后一个点应该是什么。
让我们通过一个例子来清楚地说明这一点。 让我们选择一条有 11 个单独点的路径。 第一个是从头开始绘制的因此您必须将总页面高度以百分比表示除以 10。
这意味着我们每滚动 10%就会通过一个点。 全局滚动百分比确定我们需要在哪对点之间进行插值。如果用户滚动到 26.53%我们需要使用插值法计算第 3 点和第 4 点之间 65.3% 处的点的坐标。该坐标用于更新Path的最后位置。 每次用户使用时都会发生这种情况卷轴给人一种路径缩小或增长的错觉。相机位置偏移到路径一侧的后面最后一条路径位置作为目标随路径一起移动。 项目结构
研究的最终结果由 3 个不同的项目组成负责生成和解析地图数据的 Storymap npm 包、允许在地图上创建路径的管理项目以及客户端。
该项目使所创建的穿过城市的路径充满活力。
可以点击这里查看在线演示源码可从GitHub获取。 原文链接OSMthree.js打造3D城市 — BimAnt
