Inside a CT scanner

Overview

Inside a CT Scanner is an educational web project that introduces the basic principles of computed tomography (CT).

The website takes visitors inside a virtual CT scanner, showing how its components work together to produce cross-sectional images. As visitors scroll, the scanner gradually opens up to reveal its internal parts and explain the imaging process.

The project was also our first experience working with Three.js and Anime.js. We wanted to learn how to combine 3D graphics, animation, and web development to present technical information in a more visual way.

The Challenge

CT scanners contain several components that are difficult to understand from the outside. Although diagrams can show individual parts, they don't always make it easy to understand how those parts work together.

We wanted to create an experience where visitors could see the scanner from different angles, follow the imaging process, and examine its components without needing prior knowledge of medical imaging.

What We Built

01. Scroll-Based 3D Animation

A guided animation introduces the scanner and explains how it works.

Scrolling gradually reveals the scanner's internal components, from the X-ray source and detectors to the scanning process and reconstructed images.

The animation also works in reverse, allowing visitors to move backward through the explanation.

02. Interactive Component Explorer

After completing the guided section, visitors can explore the scanner freely.

They can rotate the 3D model, zoom in, and select individual components to learn about their functions.

03. CT Imaging Visualization

The website illustrates how X-rays pass through an object, how detectors collect measurements, and how those measurements relate to reconstructed cross-sectional images.

We used consistent geometry for the scanned object and its reconstructed slices to keep the explanation visually clear.

These are simplified educational illustrations, not actual clinical reconstructions.

04. Responsive and Accessible Design

We adjusted the camera position, model scale, and content layout for different screen sizes.

The website also supports keyboard interaction and reduced-motion preferences.

Technical Approach

We built the project using Next.js 15, React 19, and TypeScript.

For the 3D environment, we used Three.js with React Three Fiber and Drei to manage the scanner model, lighting, camera, and user interactions.

Anime.js handles the scroll-driven animations. Instead of playing animations only once, we connected the timeline to scroll progress so visitors can move forward or backward at any point.

To maintain performance, we kept a persistent WebGL canvas and updated animated objects directly without triggering React re-renders on every frame.

We also used Playwright to test scrolling, component selection, responsive layouts, keyboard controls, and reduced-motion behavior.

What We Learned

This project helped us understand how animation and 3D rendering work together in a web application.

Some of the main challenges were:

• Connecting Anime.js timelines with Three.js animations.
• Managing smooth animations without unnecessary React updates.
• Keeping camera movement and model positioning consistent across screen sizes.
• Making the scanned object and reconstructed images visually consistent.
• Handling reverse scrolling and changes to accessibility preferences.

One thing we learned was that making an animation work is relatively straightforward compared to making it useful.

We spent a lot of time adjusting camera angles, animation timing, and object positions to make each step easier to understand.

The Result

We created a working educational website that combines guided explanations with interactive 3D exploration.

The project gave us practical experience with Three.js, Anime.js, responsive 3D design, and browser testing.

We verified the application through linting, TypeScript checks, a production build, and Playwright tests in Chromium. Testing on physical devices and additional browsers remains future work.

There are still improvements we'd like to make, but this was a good starting point for learning interactive 3D development.