A web-based interactive tool designed to visualize fundamental linear algebra concepts in 3D space. This project is built with React, Three.js (@react-three/fiber), and TypeScript.
🔗 Live Demo: https://guoquan.github.io/LinVis/
- Interactive Vector Manipulation:
- Add, remove, and modify basis vectors dynamically via a column-vector style UI.
- Visualize vectors as 3D arrows with clear coordinate labels.
- Span Visualization: Automatically renders the subspace generated by the basis vectors:
- Rank 1: Visualizes an infinite line passing through the origin.
- Rank 2: Renders a skewed grid plane that illustrates how the two basis vectors "weave" the plane.
- Rank 3: Displays a 3D skewed lattice indicating the full 3D space.
- Linear Analysis:
- Real-time Rank Calculation.
- Independence Check: Automatically detects linear dependence and provides exact dependency equations (e.g.,
v3 = 2*v1 + 0.5*v2). - Span Check: Determines if a "Target Vector" lies within the span of the basis vectors.
- Projection & Distance:
- If the target vector is outside the span, a yellow projection line (perpendicular) connects the target to its projection on the subspace.
- Classroom Ready:
- Projector-Friendly Mode: High-contrast colors (Cyan, Orange, Magenta), bold lines, and large text labels designed for visibility on classroom projectors.
- View Controls: Z-Up coordinate system, one-click view reset, and auto-rotation for demonstrating 3D structures.
- Framework: React + Vite
- Language: TypeScript
- 3D Engine: Three.js / @react-three/fiber / @react-three/drei
- Math Logic: Custom Gaussian elimination and linear algebra utilities
-
Clone the repository
git clone https://github.com/guoquan/LinVis.git cd LinVis -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Build for production
npm run build
(You can add screenshots here later)
MIT