100%

Atoms and electrons 3D

✓ Published2🌍 Public

Last edited Aug 3, 2025

Created on Aug 3, 2025

This interactive 3D visualization shows the structure of an atom, with a glowing gold nucleus at the center and electrons arranged in three distinct shells colored green, blue, and pink. Using Three.js with WebGL rendering, it displays 18 electrons total—2 in the inner shell, 8 in the middle, and 8 in the outer shell—with each shell rotating at a different speed to simulate orbital motion. The scene includes directional and point lighting to make the electrons appear luminous, and users can rotate, zoom, and pan the camera through OrbitControls. The animation loop continuously updates the shell rotations each frame.

AI-generated description

Atomic Structure Visualization

This 3D visualization demonstrates the basic structure of an atom:

Central nucleus (gold sphere) composed of protons and neutrons
Electrons (colored spheres) orbiting around the nucleus in different shells
Inner shell (green) has 2 electrons
Middle shell (blue) has 8 electrons
Outer shell (pink) has 8 electrons

You can:

Rotate the view by dragging with your mouse
Zoom in/out using your scroll wheel
Move the camera by holding right-click and dragging

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Atoms and electrons 3D

A 4×4×4 cube of 64 color-coded spheres rotates slowly in 3D space, demonstrating a lattice-like arrangement of electrons or atoms. Built with Three.js, the scene uses a WebGL renderer and OrbitControls for interactive camera rotation and zoom. Each sphere’s hue is derived from its grid position via HSL color mapping, with directional and ambient lighting illuminating the structure. The animation loop continuously rotates the entire group while the camera remains user-controllable.

NNita

81% match

Loading thumbnail…

Fork of Atoms and electrons 3D

A 3D cube constructed from a grid of colored spheres slowly rotates in a dark, foggy space. The scene uses Three.js with WebGL rendering, employing a perspective camera and orbit controls that let users drag to rotate and scroll to zoom. Each sphere’s hue is derived from its position within the cube, and lighting combines directional and ambient sources. The animation loop continuously rotates the group, with optional 3D text.

NNita

75% match

Loading thumbnail…

Fork of Semiconductor 2

This example presents a simple educational webpage explaining atomic structure with an animated SVG atom model. It shows a red nucleus at the center of a circular diagram with four blue electrons orbiting around it, paired with text sections describing atoms and electrons. The implementation uses inline SVG elements with CSS keyframe animations and JavaScript that sets staggered animation delays on each electron to create a continuous orbital effect. The visual arrangement is rendered directly in the HTML file with accompanying stylesheet styling.

NNita

68% match

Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

This interactive 3D visualization explores wave equations, rendering a 10x10x10 grid of spheres whose size and color represent wave amplitude at each point. Users can switch between Helmholtz, membrane wave, Schrödinger, and wave packet solutions through a dropdown menu, adjusting wavenumber and animation speed. Built with Three.js and OrbitControls, the animation computes numerical solutions to each equation in real time, mapping amplitude to sphere scale and hue. The rotating, zoomable view responds to click-and-drag interactions, with lighting provided by directional and ambient light sources.

NNita

66% match

Loading thumbnail…

3D Brain Structure Interactive

This interactive 3D visualization presents the human brain as a collection of clickable anatomical structures, each accompanied by a description of its function. Built with Three.js and the OrbitControls and CSS2DRenderer add-ons, it allows rotation, zooming, and selection. The model also includes views of neuron clusters and a detailed single neuron with labeled parts, toggled via buttons. Data for brain regions and neuron types is hardcoded in the main script.

NNita

66% match

Loading thumbnail…

Brain Structure Interactive Explaining Functions of the different parts of the brain

This interactive 3D brain model displays anatomical structures such as the cerebral cortex, cerebellum, and brain stem, with clickable regions that reveal each part’s function in an information panel. Built with Three.js, it uses OrbitControls for rotation and zoom, CSS2DRenderer for labels, and WebGL for rendering. A set of predefined geometric shapes represents the brain regions, adjacent to procedurally placed neuron clusters visualized as simple particles.

NNita

66% match

Loading thumbnail…

3D Cube of Spheres

This visualization displays a 4x4x4 cube composed of 64 colored spheres, with a hue gradient varying across each axis and a gentle rotation animation over a dark, starry background. The scene is rendered in WebGL using Three.js, featuring perspective projection, directional and ambient lighting, and interactive orbit controls for rotating, zooming, and panning. The code organizes configuration parameters in a separate module and uses `THREE.SphereGeometry`, `MeshPhongMaterial`, and `OrbitControls` to construct and manipulate the 3D environment.

CCurran Kelleher

65% match

Loading thumbnail…

Brain Structure

This interactive 3D visualization displays an anatomically positioned human brain with thirteen selectable structures, including the cerebral cortex, cerebellum, and amygdala. Each labeled region uses distinct colors and responds to clicks with an information panel describing its function. Built with Three.js, CSS2DRenderer for labels, and OrbitControls, the model supports drag rotation, auto-rotation, and scroll zooming. The scene uses multiple light sources to highlight the geometric shapes that represent each brain part.

NNita

64% match