A powerful educational tool for visualizing 3D vectors in an interactive coordinate space. Built with React Three Fiber and Three.js, this application features a clean black background with white coordinate planes (X-Z horizontal and Y-Z vertical), gridlines for spatial reference, and color-coded axis arrows (X-red, Y-green, Z-blue). Users can dynamically add vectors by specifying X, Y, Z coordinates, customize colors, and assign labels. Each vector displays with a properly oriented arrowhead of consistent size, and shows its name in a tooltip when hovering over the arrowhead. The tooltip always faces the camera for optimal readability during rotation. The collapsible sidebar panel provides full vector management capabilities including adding new vectors with custom properties and deleting existing ones. Smooth camera controls with OrbitControls allow intuitive exploration of the 3D space from any angle. Perfect for mathematics education, physics simulations, computer graphics learning, or any application requiring clear 3D vector representation.
Last Updated 5 days ago
