A* Pathfinding - Three.js

作者 anonymous累计访问 68近 7 日访问 3

// preview

// description

在三维网格中设置起终点与障碍，观察 A* 算法规划路径

这是一个以 A* 寻路算法为主题的单页交互可视化演示。页面顶部提供障碍切换、起点设置、终点设置、随机地图和清空地图控制，底部用图例区分起点、终点、路径与障碍，并预留路径数值显示。其核心体验原本依赖 Three.js 三维网格呈现地图和实时路径；本次实际浏览时外部 Three.js 与 OrbitControls 模块加载超时，因此只看到控制面板和图例，没有看到可操作网格或计算后的路径。

核心亮点

地图状态编辑

设置起点终点与障碍

随机地图控制

生成或清空障碍布局

路径状态图例

区分路径与地图节点

如何使用

选择编辑模式
通过顶部的障碍切换、设置起点或设置终点按钮选择编辑状态；当前模式会在按钮上显示激活样式，随后应在网格中选择目标单元。
调整地图布局
使用随机地图按钮生成新的障碍布局，或使用清空地图按钮移除现有布局，再结合起点与终点设置准备寻路场景。
查看规划结果
地图条件变化后，可依据底部起点、终点、路径和障碍图例识别规划结果，并在路径状态区域查看结果数值。若页面中央没有出现网格，需要刷新或等待 Three.js 资源恢复后再操作。