Research Article
Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms
Zaid Kraitem*
,
Hamza Alhaj,
Mohamad Taky
Issue:
Volume 10, Issue 3, June 2025
Pages:
43-51
Received:
8 April 2025
Accepted:
19 April 2025
Published:
22 May 2025
Abstract: The study presents an interactive 3D web-based application designed to visualize atomic structures according to Bohr’s Model using Three.js and WebGL. The primary aim of the project is to enhance educational tools in atomic physics by providing an interactive, real-time representation of atomic structures. This tool allows users to explore atomic models dynamically, offering a detailed view of electron orbits, nuclear structure, and electron movement. The visualization system is built around Three.js, a JavaScript library for 3D rendering, and incorporates force-directed algorithms for the realistic positioning of protons and neutrons within the nucleus. These particles are placed using Eades’ 1984 force-directed graph algorithm, which simulates physical forces to arrange the particles in a minimal energy configuration. The electron orbits are generated procedurally using circular subdivision methods, ensuring that electrons appear to move around the nucleus in defined energy levels, as proposed by Bohr. The application also accounts for performance optimization and user interaction. It ensures frame rate independence by calculating delta time between render cycles, providing smooth motion even on devices with varying processing capabilities. The user can interact with the model, adjusting the camera view to zoom in or rotate the atomic structure, thus fostering a deeper understanding of atomic physics. The study also highlights the integration of TypeScript, which improves maintainability and type safety in the development process. The application’s usability has been tested with engineering students, confirming its effectiveness as an educational tool. Future work includes expanding the model to incorporate quantum mechanical adaptations and potentially integrating augmented reality for more immersive learning experiences. In conclusion, this research contributes to the field of computer-aided education by providing an interactive 3D atomic visualization tool. It offers an engaging and effective method for learning about atomic structures and their behavior, making complex scientific concepts more accessible.
Abstract: The study presents an interactive 3D web-based application designed to visualize atomic structures according to Bohr’s Model using Three.js and WebGL. The primary aim of the project is to enhance educational tools in atomic physics by providing an interactive, real-time representation of atomic structures. This tool allows users to explore atomic m...
Show More
