Skip to main content
SimilarExport ZIP
100%

Fork of Atoms and electrons 3D

✓ Published0🌍 Public
NNita
Last edited Aug 3, 2025
Created on Aug 3, 2025

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.

AI-generated description

Interactive 3D Sphere Cube

A 3D visualization of a cube made of colored spheres using Three.js.

Features

  • Interactive orbit controls (drag to rotate, scroll to zoom)
  • Responsive design that adapts to window size
  • Adjustable parameters in config.js
  • Color variation based on sphere position
  • Smooth animations

Setup

  1. Clone this repository
  2. Open index.html in a modern browser
  3. Use mouse/touch to interact with the 3D scene

Configuration

Edit config.js to change:

  • Sphere size and density
  • Cube dimensions
  • Camera settings
  • Animation speed
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
93% match
Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

A 3D cube of boxes rotates continuously in a WebGL scene, with each box’s color determined by its position along the three axes. The visualization uses Three.js to render 64 small cubes arranged in a 4×4×4 grid, with HSL color mapping based on coordinate sums. OrbitControls enable interactive camera zoom and rotation, while directional and ambient lighting highlight the geometry. The animation loop manually increments the group’s rotation on each axis, creating a slow tumbling effect against a near-black background.

220bavatharani@gmail.com
85% match
Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

This example shows a rotating 3D cube composed of spheres, each colored with a hue based on its position within the grid. The visualization uses the Three.js library with WebGL rendering, creating a group of 64 spheres arranged in a 4×4×4 lattice. The entire group rotates slowly on two axes, while OrbitControls allows interactive camera manipulation. A directional light and ambient light illuminate the spheres, which use MeshPhongMaterial to produce a shaded, three-dimensional appearance. The scene responds to window resizing, and the animation loop continuously updates the rotation and renders the frame.

Ssudhachandru1987@gmail.com
85% match
Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

This example shows a rotating 3D cube composed of spheres, each colored with a hue based on its position within the grid. The visualization uses the Three.js library with WebGL rendering, creating a group of 64 spheres arranged in a 4×4×4 lattice. The entire group rotates slowly on two axes, while OrbitControls allows interactive camera manipulation. A directional light and ambient light illuminate the spheres, which use MeshPhongMaterial to produce a shaded, three-dimensional appearance. The scene responds to window resizing, and the animation loop continuously updates the rotation and renders the frame.

Ssudhachandru1987@gmail.com
85% match
Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D cube composed of 64 colored spheres animates with continuous rotation in a black scene, lit by white, ambient, and point lights to highlight each sphere's hue and brightness. The spheres are generated procedurally as Three.js meshes with Phong materials, using position-based HSL colors. OrbitControls with damping enables interactive rotation, while the renderer redraws each frame via WebGL animation.

PPremkumar
85% match
Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D grid of 64 color-shaded spheres arranged in a cube rotates slowly under directional and ambient lighting. The spheres use HSL coloring based on their grid coordinates, creating a gradient across the form. Rendered with Three.js WebGL, the scene uses `OrbitControls` for interactive camera movement, allowing viewers to orbit, pan, and zoom. The animation loop incrementally rotates the sphere group on both the X and Y axes.

Sshivamraje0404@gmail.com
85% match
Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

PPremkumar
84% match
Loading thumbnail…

Fork of 3D Cube of Spheres

A rotating cube constructed from 64 colored spheres demonstrates Three.js's 3D rendering capabilities. Each sphere's hue is derived from its grid position using HSL color mapping, creating a gradient across the cube's volume. The scene uses `THREE.Scene`, `THREE.DirectionalLight`, and `THREE.AmbientLight` for illumination, while `OrbitControls` enables user interaction. The animation continuously rotates the sphere group, and the WebGL renderer displays the result in a black background.

PPremkumar
84% match