3d-object

• SKILL.mdcore · 15,978 bytes

# 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