⚛️ 3D Atom Visualization (Three.js)

A simple 3D Atom visualization built with Three.js using pure HTML & JavaScript — no Node.js, no build tools, no frameworks.

This project is beginner‑friendly and runs directly in the browser.

📸 Preview

Video.12-18-2025.18.40.40.mp4

• You can name the image preview.png or atom.gif
• Place the image in the same folder as Atom.html

Open the Atom.html file in your browser to see:

• A central nucleus
• Orbiting electrons
• Multiple orbital planes
• Semi-transparent atom membrane
• Mouse-drag camera rotation

---

🧰 Technologies Used

• HTML5
• JavaScript (ES6)
• Three.js (CDN)

---

▶️ How to Run

1. Download or clone the project
2. Open Atom.html
3. That’s it 🎉

You can simply double‑click the file or right‑click → Open with Browser.

---

🖱 Controls

• Mouse Drag → Rotate the camera around the atom
• Resize Window → Scene adjusts automatically

---

🧪 Features

• Central nucleus (protons / neutrons)
• Orbiting electrons with animation
• Three orbital planes (X, Y, Z)
• Semi‑transparent atom shell
• Real‑time 3D rendering
• Manual camera orbit logic

---

📦 Three.js CDN Used

<script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>

---

🎯 Learning Goals

This project is designed to help learn:

• Three.js basics
• Scene, camera & renderer
• Geometry & materials
• Animation loop
• 3D math (sin / cos)
• Mouse interaction

---

🛠 Possible Improvements

• Add OrbitControls
• Add glow / bloom effects
• More realistic electron shells
• Labels for particles
• UI controls (speed, colors)

---

👤 Author

Oz Web Developer & Mobile App Student

---

📜 License

This project is open‑source and free to use for learning purposes.

---

⭐ If you like this project, give it a star on GitHub!