It is well known that handling an object can lead to a better understanding of its principles. However, when that "object" represents an abstract concept, its manipulation can be impossible using traditional methods. In recent decades, a new wave of learning materials has emerged, driven by advances in technology and their widespread accessibility. The traditional static textbook is now complemented by interactive tools.

Nowadays, the web has become widespread and represents the main platform for every domain in modern life. Thus, web technologies based on open standards (html, css, svg, javascript) have gained strong capabilities related to visualization, animation and interactivity. As a result everybody, including teachers, have access to a wide range of open source libraries and tools that allow the creation of web pages with visually rich and interactive content, which were once restricted to specialized applications and closed tools.

In this particular example, we developed teaching material for the Physical Electronics course that can be used both in class and as a self-learning tool for students, as a series of web pages that integrate 2D graphs and animations (https://d3js.org/) and 3D interactive objects (https://threejs.org/). To create the 3D scenes, we also used Blender 3D (https://www.blender.org/), a widely employed open-source software for modeling and animation. The final web pages were generated from simple Markdown files, which included the developed interactive components, using the sli.dev (https://sli.dev/) slide generator.

In this way, we created interactive materials that can be manipulated by final-year physics students. Concepts that are typically abstract—such as the reciprocal space, band structures, electrical current mechanisms, and device structures—can now be explored interactively, allowing students to gain a deeper and faster understanding of these challenging topics. In this work we describe the steps we followed in the development of this project, the challenges we faced and how we succeeded in implementing it.

These techniques have a broad range of applications: any abstract concept that can be visualized in three dimensions can be embedded into a digital interface, allowing students to manipulate and engage with the content to facilitate understanding.

Keywords: 3D, visualization, interactivity, physics.