https://github.com/saganaki22/periodictable-old

🧪 3D interactive periodic table with detailed element information, animated Bohr models, engaging educational tool built with Three.js and React.
https://github.com/saganaki22/periodictable-old

3d bohr-model chemistry chemistry-education education electron-configuration elements interactive interactive-visualizations periodic-table react science threejs visualization web-application

Last synced: 2 months ago
JSON representation

🧪 3D interactive periodic table with detailed element information, animated Bohr models, engaging educational tool built with Three.js and React.

• Host: GitHub
• URL: https://github.com/saganaki22/periodictable-old
• Owner: Saganaki22
• License: mit
• Created: 2025-03-22T00:36:43.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-03-22T03:00:52.000Z (3 months ago)
• Last Synced: 2025-03-22T04:18:28.392Z (3 months ago)
• Topics: 3d, bohr-model, chemistry, chemistry-education, education, electron-configuration, elements, interactive, interactive-visualizations, periodic-table, react, science, threejs, visualization, web-application
• Language: HTML
• Homepage: http://drbaph.is-a.dev/PeriodicTable-old/
• Size: 112 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PeriodicTable

🧪 An interactive 3D Periodic Table that allows exploration of elements with detailed information, electron configurations, and a visually engaging Bohr model representation.

![image](https://github.com/user-attachments/assets/1ff01cac-62b4-43a1-beda-4f3c5cb5bc8d)

## Features

- **Full 3D Interactive Periodic Table** with responsive design

- **Detailed Bohr Model** visualization for each element

- **Animated Electron Orbits** that move according to physical principles

- **Comprehensive Element Information** including:

  - Physical properties

  - Electron configuration

  - Discovery information

  - Summary and applications

  - Hazard information

- **Smart Search Functionality** that supports:

  - Search by element name, symbol, or atomic number

  - Search by element category (e.g., "alkali metals", "noble gases")

  - Search by hazard property (e.g., "toxic", "radioactive", "flammable")

- **Element Categorization** with color-coding for different element types

- **Hazard Indicators** showing safety information for each element

## How to Use

1. **Browse the Periodic Table** by scrolling and panning around the 3D environment

2. **Click on any element** to see its detailed 3D atomic model

3. **Use the search bar** to find elements by name, symbol, category, or hazard

4. **Explore the 3D model** by:

   - Dragging to rotate the view

   - Scrolling to zoom in and out

5. **View detailed information** in the side panel for each element

## Technologies Used

- **Three.js** for 3D rendering

- **React** for UI components

- **TailwindCSS** for styling

- **Bohr Model Physics** for electron configuration visualization

## Setup

No installation required! This is a standalone HTML application that runs directly in the browser.

1. Clone the repository

2. Open `periodic-table-3d-updated.html` in any modern web browser

3. Start exploring the elements!

## Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

## License

[MIT License](LICENSE)

## Acknowledgements

- Element data from the Periodic Table JSON repository

- Three.js community for 3D visualization techniques

- React team for the component framework

![3D Periodic Table Preview](https://i.ibb.co/23zHC9dq/og1.jpg)