Rotating 3D Objects

A slowly rotating geometric shape, whether a sphere, a crystal, or a torus, is one of the most striking things you can put on a webpage. It signals craft. It says the site was built with intention.

This lesson builds a page where a 3D object rotates continuously in the hero section.

Choosing your shape

Each shape has a different personality.

A wireframe sphere is a globe-like grid structure where lines are visible and the form is open. Best for tech, global, and data brands.

A solid torus is a donut shape that is smooth and modern. Best for design agencies and product brands.

An icosahedron is a 20-sided crystal or diamond form. Best for creative work, jewellery, and premium brands.

An octahedron is an 8-sided angular diamond shape. Best for minimal and editorial aesthetics.

A torusknot is a twisted knotted loop with a complex form. Best as a bold statement piece.

A low-poly sphere is a faceted sphere that looks like a gem. Best for portfolios and creative brands.

Pick one before writing your prompt. The most popular choices for professional sites are the wireframe sphere and the low-poly icosahedron.

Choosing your material finish

The material determines whether your object looks like glass, metal, clay, or a glowing orb.

Wireframe draws only the edges of the geometry for a clean, minimal, transparent feel.

Standard material with flat colour is a solid colour that reacts to lights and is the simplest option.

Standard material with metallic finish uses metalness 0.8 and roughness 0.2 for a brushed-metal look.

Transparent or glass uses transparent true with opacity 0.3 and wireframe false to create a glass-like object.

Self-illuminated uses MeshBasicMaterial which ignores lights entirely and glows with its own flat colour. Good for bold abstract looks.

The rotating object prompt

Copy this prompt and replace all placeholder values with your actual choices.

Build me a Three.js hero page with a rotating 3D object. Exact specifications:

FILE STRUCTURE:

Three files: index.html, style.css, main.js.

CDN links in index.html head:

• https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js

PAGE LAYOUT:

Split the hero section into two halves side by side.

Left half: navigation logo at top, then vertically centred text with heading [YOUR HEADING],
subheading [YOUR SUBHEADING], and CTA button [BUTTON TEXT].

Right half: the Three.js canvas showing the rotating 3D object centred in its container.

On mobile under 768px: stack vertically with canvas on top and text below.

TYPOGRAPHY:

Google Font: [FONT NAME — e.g. DM Serif Display for headings, DM Sans for body]

Background: [BACKGROUND HEX]
Text colour: [TEXT HEX]
Accent and button colour: [ACCENT HEX]

3D OBJECT in main.js:

• Shape: [SHAPE NAME — e.g. IcosahedronGeometry with detail level 1]
• Size: radius 2 units
• Material: [MATERIAL DESCRIPTION — e.g. MeshStandardMaterial, colour #c9a84c,
• metalness 0.6, roughness 0.3]
• Rotation: rotate on Y axis by 0.003 per frame and X axis by 0.001 per frame.
• Slow and continuous.
• Mouse tilt: when the user moves the mouse the object should subtly tilt in the direction
• of the cursor. The effect should be gentle with a maximum of 0.3 radians total tilt
• in either direction.
• Use GSAP to smoothly lerp toward the target rotation so the tilt feels fluid not snappy.

LIGHTING:

Ambient light: intensity 0.4

Point light 1: [ACCENT HEX] colour, intensity 1.5, position x:-3 y:3 z:5

Point light 2: white, intensity 0.8, position x:3 y:-3 z:5

CAMERA:

PerspectiveCamera with fov 45 positioned at z:6.

Camera should NOT move. The object rotates and the camera stays still.

CANVAS SETUP:

Canvas fills the right half of the hero section and is not full screen.

Transparent background on the canvas using alpha: true so the page background shows through.

Set renderer.setClearColor(0x000000, 0) for transparency.

SELF-CHECK BEFORE DELIVERING:

• Open in browser and confirm the 3D object is visible and rotating.
• Move the mouse and confirm the object tilts gently.
• Check on a 375px wide viewport and confirm the layout stacks correctly.

Adding a secondary floating ring

If you want a second element orbiting the main object, use this follow-up prompt:

"Add a thin torus ring that orbits around the main icosahedron. The ring should be on a 45-degree tilt plane and orbit continuously. Colour: [YOUR COLOUR], very thin tube radius of 0.03. The ring orbit speed should be about half the object's own rotation speed."

Scroll effect variation

If you want the object to respond to scroll, add this to your prompt:

Using GSAP ScrollTrigger add to the HTML head:

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js

Animate the 3D object so that:

• At scroll position 0% the object is at normal size scale 1 and normal rotation
• At scroll position 50% the object has rotated an additional 180 degrees on the Y axis

and scaled to 1.3

• Use scrub: true so the animation is tied directly to scroll position and not triggered once

Testing your rotating object

Open the HTML file in Chrome and check four things.

Object visible and rotating: you can see the 3D shape turning continuously. Mouse tilt working: moving your cursor across the right side makes the object tilt. Transparent background: if you set alpha true, the canvas background should show the page colour and not a black box. Mobile layout: resize to 375px and text and canvas should stack vertically.

Common problems

If the object looks flat and not 3D, the material is ignoring lights. If using MeshStandardMaterial check that there is at least one light in the scene. Ambient light alone will not show depth so add a point light.

If the canvas shows a black box instead of a transparent background, two changes are needed: in the Three.js renderer set alpha: true in the constructor AND call renderer.setClearColor(0x000000, 0). Both are required and neither works without the other.

If the mouse tilt is jerky and not smooth, send Claude this: "The mouse tilt works but feels instant and jerky. Apply GSAP quickTo for smooth interpolation toward the target X and Y rotation."

If the object is too large or too small, send Claude this: "The icosahedron appears too small. Increase the geometry radius to 3 and move the camera to z:8 to maintain the same field of view."