100%

React + ThreeJS 3D Cube of Spheres

✓ Published1🌍 Public

Last edited May 15, 2025

Created on May 15, 2025

This example displays a three-dimensional cube of spheres, arranged in a 4x4x4 grid, with each sphere’s color determined by its position via an HSL calculation. The entire structure rotates automatically, while users can drag to orbit the view and scroll to zoom, thanks to Three.js’s `OrbitControls`. The scene is built with React 19, which manages the mount point and lifecycle, while Three.js handles WebGL rendering, including `MeshPhongMaterial` for coloring and `DirectionalLight` for illumination.

AI-generated description

Cube of Spheres

A colorful 3D visualization of spheres arranged in a cubic formation using React 19 and Three.js.

Features

4x4x4 cube of colored spheres
Automatic rotation animation
Interactive orbit controls (drag to rotate, scroll to zoom)
Responsive design that adapts to window size

Technology

React 19
Three.js for 3D rendering
No dependencies on react-three-fiber or other helper libraries

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

three.js

Three colored cubes rotate continuously in a gray 3D scene, each spinning on its X and Y axes at staggered speeds. The visualization uses Three.js with a WebGL renderer to draw the cubes, a PerspectiveCamera, DirectionalLight, and MeshPhongMaterial for shading. The animation loop increments rotation based on time, driven by requestAnimationFrame, with cubes positioned at different X coordinates.

Ssabrinamochi

82% 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

81% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A fork of the "Cube of Spheres" example, this visualization renders a circle of 20 colored spheres in 3D using Three.js. The spheres are evenly distributed around a circular path and HSL-colored by their angular position. Directional and ambient lighting illuminate the scene, which rotates continuously while OrbitControls allows interactive camera orbiting. The WebGL renderer updates in an animation loop, and the window resize handler adjusts the perspective camera.

CCurran Kelleher

79% match

Loading thumbnail…

My first three.js app

A green cube rotates continuously in a three-dimensional scene rendered using Three.js. The example demonstrates basic 3D visualization setup with a scene, perspective camera, and WebGL renderer. It creates a cube mesh from a BoxGeometry with a MeshBasicMaterial, positions the camera, and uses a requestAnimationFrame loop to incrementally update the cube’s rotation on the x and y axes. The code constructs the entire visualization directly in JavaScript within an HTML page, sourcing the Three.js library from the official threejs.org build.

Hhenrik.voigt@uni-jena.de

77% match

Loading thumbnail…

3D Cubes

The visualization renders a grid of 3D cubes in an isometric projection using React and SVG, with each cube composed of three visible faces: a front square, a top polygon, and a right polygon. The cube faces are drawn as separate SVG polygons using React components (`CubeFront`, `CubeTop`, `CubeRight`, `AbstractCubeSide`), with coordinates calculated from a front square and a fixed skew depth. The grid is arranged in a 2x2 layout with an additional series of top faces extending diagonally, creating a layered effect. The example uses React 17 and D3 v7, though D3 is loaded but not directly utilized in the rendering logic.

MMichael

77% match

Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Ssabrinamochi

76% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D grid of spheres animates a solution to the Helmholtz wave equation, with each sphere’s radius and color representing the wave amplitude at that point in space. The visualization uses Three.js with WebGL rendering and OrbitControls for camera navigation. Spherical Bessel functions and spherical harmonics compute the wave values, which oscillate over time to show standing wave patterns in three dimensions.

NNita

76% match