A* Pathfinding - Three.js
Set start/end points and obstacles on a 3D grid, and observe the A* algorithm planning a path
This is a single-page interactive visualization demo themed around the A* pathfinding algorithm. The top of the page provides obstacle toggle, start point setting, end point setting, random map, and clear map controls; the bottom uses a legend to distinguish start point, end point, path, and obstacle, and reserves a path value display. Its core experience originally relies on a Three.js 3D grid to render the map and real-time path; during this actual visit, the external Three.js and OrbitControls modules timed out, so only the control panel and legend were visible, without an operable grid or calculated path.
Highlights
Map State Editing
Set start point, end point, and obstacles
Random Map Control
Generate or clear obstacle layouts
Path Status Legend
Distinguish path and map nodes
How to Use
Select Editing Mode
Select an editing state via the obstacle toggle, set start point, or set end point buttons at the top; the current mode shows an active style on the button, and then you should choose a target cell on the grid.
Adjust Map Layout
Use the Random Map button to generate a new obstacle layout, or use the Clear Map button to remove the existing layout, then combine the start and end point settings to prepare a pathfinding scene.
View Planning Result
After map conditions change, you can identify the planning result using the bottom start, end, path, and obstacle legend, and view the result values in the path status area. If no grid appears in the center of the page, refresh it or wait for the Three.js resources to recover before operating.
Similar Sites
1Grassland Football Battle
3D web football battle game, choose a position and work with AI teammates to complete a first-to-3-goals match.
1CS FPS - Bomb Defusal Mode
A web-based first-person shooter game built on Three.js, CS-style bomb defusal mode
0Water Scooping Battle - 3D Farm Drainage Game
A first-person 3D farm drainage sandbox game where you control the protagonist to scoop out standing water with tools, featuring fluid simulation, tool upgrades, rainfall system, and other gameplay.
3VoxelCraft
A 3D voxel block mini-game running in the browser, built with Three.js.
27Turbo Rush 3D
3D racing game - dodge traffic, grab nitro, and cross the finish line first
15Infinite Bloom
A peony procedurally generated by Three.js, an eternal sea of flowers where particles and light intertwine.