Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Gyroscope

A heavy rotor spinning in three nested gimbal rings on a post, tumbling through every orientation. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified94 lines of codev1.0.0

In Science & maths, Machines & clockwork, Craft & heritage

Next: Brass Armillary SphereSurprise me

Gyroscope preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

12

Turns of the rotor per loop.

1

How far the rings swing; 1.5 and above also sends the outer rings round.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 2.3 MB)
Info

What it is

A gyroscope in its gimbals: a heavy brass rotor spinning on its axle inside an inner ring, hung in a middle ring, hung in an outer ring that stands on a post. Each ring pivots about a different axis, so the rotor tumbles through every orientation while it spins. Choose the metal of the rings (steel, brass, copper or chrome), how fast the rotor spins, how far the rings tumble (a high setting sends the outer rings round whole turns), the backdrop colour and whether the camera sways.

Reuse it in your own idea

  • Explainer: Steel, gentle tumble.
  • Vintage instrument: Brass, warm.
  • Energetic: Chrome, full tumble.

Which part is reusable

src/gyroscope.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • Angles follow a formula rather than rigid-body physics, so the rotor does not precess as a real gyroscope would.
  • At very high tumble the rings may pass through the post's top pin.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/gyroscope.js
Exports
  • createGyroscope({ metal?, spin?, tumble? }) => { group, setProgress(progress), dispose() }
  • METALS: { steel, brass, copper, chrome }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The post stands on y = 0; the gimbal centre is at y ≈ 4.5 with outer ring radius 3.2, middle 2.6, inner 2.0; ring axes are y (outer), x (middle), z (inner) and the rotor spins about y in the inner frame.

Lighting: A warm key light with a shadow map and the studio environment.

Timing: setProgress(progress) sets every angle in closed form; frames render in any order.

Output
1080×1080, 30 fps, 16 s · procedural (computed from the frame number) · seamless loop — The rotor turns a whole number of times per loop, the rings swing in sines of whole cycles (or turn whole circles at high tumble) and the camera sway is a sine of the loop, so the last frame meets the first.
Tested
Rendered 480 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
A few thousand triangles and a shadow map: about a millisecond a frame on an integrated Intel GPU. Software WebGL renders in about a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- gyroscope/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:1d481f81ab270129…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/objects-scenes/gyroscope (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: three nested gimbal rings on different axes with a spoked brass rotor, all angles closed-form on an exact loop.
BinMore like this

More like this

Play these full screen

Music Box

3D object3DSeamless loop12 seconds

Astrolabe

3D object3DSeamless loop16 seconds