simonreisinger/Interactive-3D-Human-Heart-Visualization

An interactive visualization of a human heart for education purposes

Interactive 3D Human Heart Visualization

Visualization here

Functionality

• On the right top corner you can select part of the organ. This will be emphasized and on the right side a fitting wikipedia Article will be added.
• If one organ hides another one you can remove parts of the heart to get a better look.

Controls

• The Visualization can be rotated by dragging the mouse. For translation on Mac the CONTROL key has to be pressed.
• If you click at one anatomical structure the visibility will be set to false.
• To select and highlight an object and get further informations there is a menu at the top right corner.

Color scheme for the different kinds of anatomical structures

Organ structures	color
Coronary arteries	red
Pulmonary vein	red
Aorta	red
Coronary veins	blue
Pulmonary arteries	blue
Vena cava superior and inferior	blue
Trabecular muscle	saddlebrown
Myocard	brown
right and left Auricle	#ffc0a1
Heart valve	lightblue

Sources:

Libraries and Data

• threejs
• jquery
• Wikipedia
• Model: BodyParts3D, © The Database Center for Life Science licensed under CC Attribution-Share Alike 2.1 Japan (Link)

Tutorials

• Menu
• Sort Menu
• Object Loader
• Bloom Effect

TODOs

• Optimize for Safari
• Remove Structure instead of just hide
• Make UI more beautiful
• Add MIT Lizenz
• Make App better compatible for mobile
• Implement a backlog so COMAND + Z can be used
• Make responsive Web APP
• When resizing keep center in the center
• https://github.com/shama/webpack-stream
• https://gulpjs.com/
• https://classic.yarnpkg.com/en/

Acknowledgment

This project was created for the course Visualisierung Medizinischer Daten 2 at TU Wien. It was rewarded full points.