Skip to content

PrinceArora-4/medview-pro

Repository files navigation

MedView Pro - 3D Medical Viewer

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.

MedView Pro License React TypeScript



✨ Features

  • 🎯 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


🛠️ Tech Stack

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


📁 Folder Structure

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


🚀 Run Locally

Follow these steps to set up and run the project on your local machine:

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn package manager

Installation Steps

  1. Clone the repository

    git clone <repository-url>
    cd medical-viewer
  2. Install dependencies

    npm install
  3. Start the development server

    npm run dev
  4. Open in browser

    Navigate to http://localhost:5173 to view the application.

Additional Commands

# Build for production
npm run build

# Preview production build locally
npm run preview

# Run linter
npm run lint

📚 Core Functional Files

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

🎯 Key Features Explained

STL Model Support

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.

Clipping Planes

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.

Measurement System

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

Theme System

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

📞 Contact

Prince Arora


📄 License

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.

🙏 Acknowledgments

  • 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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages