A professional-grade 3D medical model viewer built with modern web technologies. MedView Pro enables medical professionals, researchers, and engineers to visualize, analyze, and interact with 3D medical models directly in the browser with advanced features like clipping planes, measurements, and annotations.
- 🎯 3D Model Loading - Supports both binary and ASCII STL file formats with drag-and-drop functionality
- 🎮 Interactive Controls - Intuitive trackball controls for rotation, panning, and zooming
- 📦 Multi-Model Management - Load and manage multiple models simultaneously with individual visibility and opacity controls
- ✂️ Advanced Clipping - Slice through models along any axis for detailed cross-sectional analysis
- 📏 Precision Measurements - Point-to-point distance measurements with real-time scale conversion and visual indicators
- 🏷️ Smart Labels - Add, edit, and position 3D-anchored labels with automatic depth sorting
- 📸 High-Quality Export - Export viewport screenshots as PNG or JPEG images
- 🎨 Dual Theme Support - Switch between light and dark themes with independent canvas theming
- ⌨️ Keyboard Shortcuts - Streamlined workflow with intuitive keyboard commands
- 📱 Responsive Design - Optimized for desktop and tablet devices with adaptive layouts
- 🎭 Transparency Controls - Adjust model opacity with preset modes (visible, half-transparent, full-transparent)
- 🔄 Camera Reset - Quickly reset view to fit all loaded models
| Category | Technologies |
|---|---|
| Frontend | React 19.1.1, TypeScript 5.9.3, Three.js 0.180.0, Tailwind CSS 4.1.14 |
| State | Zustand 5.0.8 (Global state management) |
| Animation | Framer Motion 12.23.22 |
| Build Tool | Vite 7.1.7 |
| 3D Rendering | Three.js with STLLoader, TrackballControls, CSS2DRenderer |
| Icons | Lucide React 0.544.0 |
| Dev Tools | ESLint, Prettier, TypeScript ESLint, Git, VS Code |
medical-viewer/
├── public/
│ ├── icons/ # UI icon assets (SVG)
│ └── sample-stls/ # Sample 3D model files
├── src/
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ │ ├── IconBtn.tsx # Customizable icon button
│ │ │ ├── Slider.tsx # Range slider component
│ │ │ ├── Spinner.tsx # Loading spinner
│ │ │ └── Toggle.tsx # Toggle switch
│ │ ├── LabelManager.tsx # 3D label management
│ │ ├── MeasurementTool.tsx # Distance measurement
│ │ ├── ModelLoader.tsx # STL file loader
│ │ ├── ObjectListPanel.tsx # Model list sidebar
│ │ ├── SlicingControl.tsx # Clipping plane controls
│ │ ├── ThreeScene.tsx # Three.js viewport
│ │ └── Toolbar.tsx # Main toolbar
│ ├── hooks/
│ │ ├── useModelsStore.ts # Zustand store for app state
│ │ └── useResizeObserver.ts # Viewport resize handler
│ ├── utils/
│ │ ├── export.ts # Screenshot export utilities
│ │ └── three-utils.ts # Three.js helper functions
│ ├── App.tsx # Root application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles and theme variables
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.cjs # Tailwind CSS configuration
└── README.md # Project documentation
Follow these steps to set up and run the project on your local machine:
- Node.js (v18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd medical-viewer
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open in browser
Navigate to
http://localhost:5173to view the application.
# Build for production
npm run build
# Preview production build locally
npm run preview
# Run linter
npm run lint| File | Purpose |
|---|---|
ThreeScene.tsx |
Main 3D viewport component managing Three.js scene, camera, renderer, and controls |
useModelsStore.ts |
Zustand store managing global state (models, measurements, labels, clipping, theme) |
ModelLoader.tsx |
STL file loader with drag-and-drop support for both binary and ASCII formats |
ObjectListPanel.tsx |
Sidebar panel for managing loaded models (visibility, opacity, deletion) |
MeasurementTool.tsx |
Distance measurement tool with point selection and scale conversion |
LabelManager.tsx |
3D label system with CSS2DRenderer for anchored text annotations |
SlicingControl.tsx |
Clipping plane controls for cross-sectional model analysis |
Toolbar.tsx |
Main toolbar with actions (reset camera, measurements, screenshot, theme toggle) |
three-utils.ts |
Helper functions for camera fitting, raycasting, and Three.js operations |
export.ts |
Utility functions for exporting canvas screenshots as PNG/JPEG |
MedView Pro fully supports both binary and ASCII STL file formats. The STLLoader is configured to automatically detect and parse either format, ensuring compatibility with models from various sources.
Use the clipping controls to slice through models along X, Y, or Z axes. This feature is essential for analyzing internal structures and cross-sections of complex 3D medical models.
Click on two points in the 3D space to measure distances. The system includes:
- Real-time distance calculation
- Scale conversion (mm, cm, m)
- Visual line indicators
- Persistent measurement labels
MedView Pro features a dual-theme system:
- Global Theme: Light/Dark mode affecting UI panels and controls
- Canvas Theme: Independent theme for the 3D viewport background
Prince Arora
- 🐙 GitHub
- 🐦 X (Twitter)
This project is licensed under the MIT License.
MIT License
Copyright (c) 2025 Prince Arora
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
- Three.js community for excellent 3D rendering capabilities
- React and TypeScript teams for robust development tools
- Tailwind CSS for flexible styling utilities
Made with ❤️ by Prince Arora