Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Smooth Orbit Camera

A camera that glides around your subject with a gentle rise and fall. Loops perfectly.

Camera move, D1 MotionAny rendererSeamless loop, verified70 lines of codev1.0.0

In Light, glass & shine

Next: Chrome Material & Studio LightSurprise me

Smooth Orbit Camera preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

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

Effect controls

Presets

1
8.5

How far the camera stays from the subject.

2.2
0.35
0.4

Steady loops seamlessly. Ease in & out starts and ends slowly (no seamless loop).

38

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

View code Sample video (default settings, 533 KB)
Info

What it is

Circle any object with a calm, cinematic camera move. Set how far away it sits, how high, how many turns per clip and how much it gently bobs or breathes in and out. It is plain math (a position and a look-at point for each moment of the clip), so it works around any subject in any 3D scene.

Reuse it in your own idea

  • Circle the glass box of Bouncing Marbles while the balls fall (see the Bouncing Marbles in a Box example).
  • Feed the position into a 2D perspective projection to orbit a canvas particle field.
  • Use easing 'smooth' and turns 0.25 for a slow quarter-turn product reveal.

Which part is reusable

src/orbit-camera.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses three only for the demo.

See it combined with other ingredients in Bouncing Marbles in a Box, Bouncing Marbles in a Box, Chrome Orbit, Chrome Orbit, Chrome Orbit.

Good to know

  • Does not avoid obstacles; choose a radius that clears your scene.

Technical details

Technical details
Implementation
Plain JavaScript math — works with any renderer · ES module src/orbit-camera.js
Exports
  • orbitCamera(progress, { target?, radius?, height?, turns?, startAngle?, heightWave?, heightWaves?, radiusWave?, radiusWaves?, targetLift?, easing? }) => { position, target, angle }
  • applyOrbit(camera, state) => camera
  • fitRadius(boundingRadius, fovDegrees?, margin?) => number
Dependencies (exact)
  • three@0.185.1 (demo) — Demo scene only. src/orbit-camera.js has no dependencies.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Y-up. Angle 0 is on the +Z side of the target, increasing towards +X. Units match your scene.

Lighting: None. Keep your scene's lights.

Timing: Driven by progress 0…1, so the same path stretches to any duration.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Whole turns and whole bob/breathe cycles. Only seamless with the default Steady speed; Ease in & out is not loopable.
Tested
Rendered 240 frames on 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-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 trig calls per frame. None.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- orbit-camera/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:e54405aabe47ddc8… · other versions: 1.1.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder). Third-party: three.js 0.185.1 (MIT). License details
Provenance
Original code written for AI Pixel Wizard in October 2026.
BinMore like this

More like this

Play these full screen

Resin Pour

3D object3DSeamless loop14 seconds

Snow Globe

3D object3DSeamless loop12 seconds