Explore the human brain in 3D with this interactive MRI viewer. Click and drag to rotate the brain, and use the scroll wheel to zoom in and out. This tool is perfect for students, researchers, and medical professionals who want to learn more about the brain's anatomy.
This web-based application allows users to explore and visualize 3D brain MRI data interactively. By combining Flask on the server side with Three.js for client-side 3D rendering, the application provides a powerful tool for examining brain anatomy through volumetric data and individual 2D slices. It is designed for a wide range of users, from students and educators to researchers and medical professionals, offering an engaging way to study and understand complex brain structures.
3D Brain MRI Visualization: The application uses Three.js, a popular 3D graphics library for JavaScript, to create a 3D representation of the brain based on MRI data. Users can rotate the 3D brain model, zoom in and out, and view the brain from different angles. The volumetric data (representing the brain) is loaded from a JSON file and displayed as a point cloud, which consists of many small points that together form a 3D structure.
Slice Navigation and Display: Users can view individual 2D slices of the brain in three anatomical planes: axial, sagittal, and coronal. These slices are images (PNG files) stored on the server and are served dynamically based on the user's navigation input. The JavaScript on the client side allows users to navigate through the slices using keyboard keys (like arrow keys and page up/down) or by scrolling with the mouse wheel. For instance, pressing the arrow keys or scrolling the mouse wheel will load the next or previous slice in the chosen orientation, allowing users to "scroll" through the brain.
Dynamic Loading of Data: The application fetches the available slice counts for each orientation from the server to know how many slices are available for the axial, sagittal, and coronal planes. It then loads the appropriate slice images dynamically as the user interacts with the interface. It also loads the 3D volumetric data from a JSON file and uses it to render the point cloud in the 3D view.
Server-Side (Flask): The Flask server handles HTTP requests to serve the necessary HTML, JavaScript, and CSS files to the browser. It also serves the MRI slices and volumetric data. When a user requests a slice or volumetric data, the server checks if the file exists and then sends it to the client. If the requested file is not found, the server returns an error message.
Client-Side (JavaScript with Three.js): The client-side code initializes a 3D scene using Three.js. It sets up the camera, lighting, and controls to allow users to interact with the 3D model. It also fetches the slice counts and displays the 2D brain slices using HTML canvas elements. The code listens for keyboard and mouse events to update the view in real time as the user navigates through the brain slices or interacts with the 3D model.
This application is useful for:
Overall, this application provides an intuitive way to explore 3D brain data interactively, making complex MRI data more accessible and understandable to a broader audience.