Skip to content

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

License

Notifications You must be signed in to change notification settings

Saganaki22/PeriodicTable-old

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

PeriodicTable

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

image

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

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Languages