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.
| Published in | Mathematics and Computer Science (Volume 10, Issue 3) |
| DOI | 10.11648/j.mcs.20251003.11 |
| Page(s) | 43-51 |
| Creative Commons |
This is an Open Access article, distributed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution and reproduction in any medium or format, provided the original work is properly cited. |
| Copyright |
Copyright © The Author(s), 2025. Published by Science Publishing Group |
Computer Graphics, Bohr Model, Atom Visualization, WebGL, THREE.js, Interactive Simulation
| [1] | Bohr, N. (1913). "On the Constitution of Atoms and Molecules." Philosophical Magazine, 26(151), 1-25. |
| [2] | Foley, J., van Dam, A., Feiner, S., & Hughes, J. (2020). Computer Graphics: Principles and Practice. Addison-Wesley. |
| [3] | Angel, E. (2018). Interactive Computer Graphics: A Top-Down Approach with OpenGL. Pearson. |
| [4] | Hearn, D., & Baker, M. P. (2022). Computer Graphics with WebGL. Prentice Hall. |
| [5] | Kobourov, S. (2013). "Force-Directed Drawing Algorithms." Handbook of Graph Drawing and Visualization, 385-386. |
| [6] | Y. Li et al., "NPIPVis: A Visualization System Involving NBA Visual Analysis and Integrated Learning Model Prediction," Virtual Reality & Intelligent Hardware, vol. 4, no. 5, pp. 444–458, 2022. |
| [7] | X. Chen et al., "PartLabeling: A Label Management Framework in 3D Space," Virtual Reality & Intelligent Hardware, vol. 5, no. 6, pp. 490–508, 2023. |
| [8] | K. Zhang et al., "Depth of Field Rendering Using Multilayer-Neighborhood Optimization," IEEE Transactions on Visualization and Computer Graphics, vol. 26, no. 8, pp. 2546–2559, 2019. |
| [9] | L. Wang et al., "Efficient Binocular Rendering of Volumetric Density Fields with Coupled Adaptive Cube-Map Ray Marching for Virtual Reality," IEEE Transactions on Visualization & Computer Graphics, vol. 30, no. 10, pp. 6625–6638, 2024. |
| [10] | Mozilla Developers. (2024). "Window: requestAnimationFrame method." MDN Web Docs. |
| [11] | Coleman, D. (2019). "Understanding Delta Time." Medium. |
| [12] | Adachi, S., & Tanimura, Y. (2023). "Quantum Trajectories in Atomic Visualization." Journal of Computational Physics, 312(2), 554-571. |
| [13] | Lin, X., & Zhang, Y. (2022). "Web-Based Scientific Simulations Using WebGL and Three.js." Advances in Visualization Science, 9(3), 201-215. |
| [14] | Li, W., & Chen, Z. (2021). "Enhancing Interactive Learning with 3D Atom Models." Educational Technology & Society, 24(4), 102-119. |
| [15] | Jizhe Xia, Qunying Huang, Zhipeng Gui & Wei Tu (2024). “Web-Based Mapping and Visualization Packages”. The Visual Computer. pp283-314. |
| [16] | Xiaokun Wang, Yanrui Xu, Sinuo Liu, Bo Ren, Jiří Kosinka, Alexandru C. Telea, Jiamin Wang, Chongming Song, Jian Chang, Chenfeng Li, Jian Jun Zhang & Xiaojuan Ban. (2024). “Physics-based fluid simulation in computer graphics: Survey, research trends, and challenges”. The Visual Computer. Volume 10, pages 803–858. |
APA Style
Kraitem, Z., Alhaj, H., Taky, M. (2025). Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms. Mathematics and Computer Science, 10(3), 43-51. https://doi.org/10.11648/j.mcs.20251003.11
ACS Style
Kraitem, Z.; Alhaj, H.; Taky, M. Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms. Math. Comput. Sci. 2025, 10(3), 43-51. doi: 10.11648/j.mcs.20251003.11
Share This Article
Twitter
Linked In
Facebook
Copy
Download@article{10.11648/j.mcs.20251003.11,
author = {Zaid Kraitem and Hamza Alhaj and Mohamad Taky},
title = {Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms
},
journal = {Mathematics and Computer Science},
volume = {10},
number = {3},
pages = {43-51},
doi = {10.11648/j.mcs.20251003.11},
url = {https://doi.org/10.11648/j.mcs.20251003.11},
eprint = {https://article.sciencepublishinggroup.com/pdf/10.11648.j.mcs.20251003.11},
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.
},
year = {2025}
}
TY - JOUR T1 - Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms AU - Zaid Kraitem AU - Hamza Alhaj AU - Mohamad Taky Y1 - 2025/05/22 PY - 2025 N1 - https://doi.org/10.11648/j.mcs.20251003.11 DO - 10.11648/j.mcs.20251003.11 T2 - Mathematics and Computer Science JF - Mathematics and Computer Science JO - Mathematics and Computer Science SP - 43 EP - 51 PB - Science Publishing Group SN - 2575-6028 UR - https://doi.org/10.11648/j.mcs.20251003.11 AB - 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. VL - 10 IS - 3 ER -
Department of Information Engineering, Al-Wataniya Private University, Hama, Syria
Department of Information Engineering, Al-Wataniya Private University, Hama, Syria
Department of Information Engineering, Al-Wataniya Private University, Hama, Syria
Information