Menu

Individual skill

3d-object

A product or object in 3D — built from shapes, extruded from a logo, or loaded from your own .glb — lit like a studio shot, turning on a turntable, ready to export as a still, a transparent cut-out or a turntable video.

packages/content/assets/open-design/skills/3d-object/SKILL.md

Read pinned source

Source commit 400641fd6781fa0febad445984ee76440374736d

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Instructions only
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,049
Repository last updated
Nov 8, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 3D Object

**Intent.** One object, shown well: a product, a logo or a simple form, lit like a studio photo, on a quiet stage, turning slowly. The page is a single self-contained three.js scene. People use it as a hero visual, export a still or a transparent cut-out for slides and pages, or a turntable clip for social.

This is not a 3D editor, a game scene or text-to-3D generation. If the user wants a model of something that doesn't exist yet and can't be built from simple shapes, say so and offer a procedural stand-in.

## 1. Pick the object path

- **Procedural:** build the object from three.js geometry: `LatheGeometry` for anything turned (bottles, speakers, cups, lamps), `ExtrudeGeometry` for flat shapes with depth, boxes and cylinders with bevels (`RoundedBoxGeometry` from the addons) for devices. Combine a few parts in a `Group`. Aim for the silhouette and proportions first; small details (a groove, a light ring, a seam) make it read as a product.
- **Extruded logo:** parse the brand's SVG with `SVGLoader`, turn each filled path into shapes (`SVGLoader.createShapes`), and extrude with a bevel. Flip y (SVG's y points down), center the geometry, and scale it to a fixed size. Strokes aren't extruded; ask for a filled version of the mark if that's all there is.
- **The user's model (`.glb` / `.gltf`):** load it with `GLTFLoader`. Copy the file under `assets/` next to the design (with a shell copy: it's binary) and load `assets/<name>.glb`; if you can't copy it, use its path relative to the design. Set up `DRACOLoader` with the pinned decoder path (below) so Draco-compressed models work. Never assume the model's units, origin or orientation: measure its bounding box, rest it on the ground, center it, and frame the camera from its size (the GLB example's `stage()` does exactly this). If the file is over 50 MB, tell the user it will load slowly and suggest `npx @gltf-transform/cli optimize in.glb out.glb --compress draco` first.

## 2. Build the scene