Navigation Simulation
3D rendering path planning using ThreeJS.
Video Demonstration
Features
3D Rendering & Camera
Navigation simulation rendered in 3D using ThreeJS and TypeScript. Orbital camera that focuses around the navigation agent.
Improved Agent & Scene
Agent rendered with a crash dummy model. Collision Objects rendred as explosive barrels. Rigged and animated using Adobe Mixamo. All models free for project use under CC0 License.
Orientation Smoothing
Rotation smoothing using vector math. Model walks facing the correct direction, and rotates smoothly between angles instead of snapping.
Technologies Used
TypeScript ThreeJS Vite Github Pages
Challenges We Encountered
One of the most difficult aspects of this project was implementing the pathing algorithms. We had a encountered a lot of bugs trying to move our Processing code over to TypeScript, so we took a step back and started writing the functions one by one. We also visualized the graph using ThreeJS objects, which really helped us understand what was going wrong with our algorithms and make the fixes that we needed to.
Another challenge we faced was importing the animated model into the simulation. Rigging and animating was done very easily using Adobe's Mixamo, but we faced some trouble getting the model imported using ThreeJS.
Art Contest
