Knee Preoperative Planning Web Application

A web-based Femur Preoperative Planning platform for knee surgery that provides interactive 3D visualization, anatomical landmark creation, axis generation, plane construction, and controlled distal femur resection.

This project simulates a real-world orthopedic preoperative planning workflow by allowing users to define femoral landmarks, compute surgical axes, adjust alignment planes, and visualize resection with live measurements.

bones.mov

---

Features

• Load and render Femur and Tibia STL models in a single 3D scene
• Create and modify 10 femoral anatomical landmarks
• Automatic generation of:
  • Mechanical Axis
  • Anatomical Axis
  • Trans-Epicondylar Axis (TEA)
  • Posterior Condylar Axis (PCA)
• Surgical plane creation:
  • Plane perpendicular to mechanical axis
  • Varus / Valgus plane (angle-controlled)
  • Flexion / Extension plane (angle-controlled)
  • Distal medial plane
  • Distal resection plane (offset-controlled)
• Interactive controls for:
  • Varus / Valgus adjustment (°)
  • Flexion / Extension adjustment (°)
  • Distal resection depth (mm)
• Toggle-based visualization of distal femur resection
• Real-time measurement display:
  • Distal medial resection
  • Distal lateral resection
• Automatic dependency updates when landmarks or angles change

---

Workflow Overview

1. Load Femur and Tibia STL files into the scene
2. Create femoral landmarks by selecting predefined landmark modes
3. Click Update to generate anatomical axes
4. Generate and project surgical planes
5. Adjust Varus/Valgus and Flexion/Extension angles
6. Control distal resection depth and visibility
7. Review live resection measurements

---

Application Behavior

• Single 3D scene
• Femur and Tibia always visible
• Landmarks and axes update dynamically
• Surgical planes remain hidden by default
• Any change to a parent parameter automatically updates all child planes, axes, resection geometry, and measurements

---

Disclaimer

This project is intended for educational and demonstration purposes only.
It does not represent a certified medical device or clinical planning tool. (yet)

---

Run Locally

Clone the project

  git clone https://github.com/abhyuday911/UI-ThreeJs-Bones.git

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run start

The server will initialize in the http://localhost:5173/

🚀 Future Enhancements Scope

• Refactor script.js into modular components for improved readability and maintainability.
• Implement the missing feature to perform distal femur resection using the Distal Resection Plane.

Back to top