🧊 Three.js Product Skills

Agent skills that teach Claude Code, Codex and other AI coding agents to build 3D product viewers, configurators, AR embeds and 360° spins, with tested templates, current three.js APIs and real performance budgets.

★ View on GitHub Install the skills

Product viewerDrag to orbit, scroll or pinch to zoom. Open the template ↗

ConfiguratorColors by material name; the state goes in the URL. Open full screen ↗

360° spinThe same mug as a 36-frame image sequence in Spin360.

All three demos show the same product. The model is assets/mug-optimized.glb (31 KB after glTF-Transform), exported from three.js by tools/export_mug.py.

The skills

Skill	What your agent learns
`threejs-product-viewer`	Load a GLB, auto-frame any model, studio lighting, contact shadow, orbit limits, render on demand, cleanup and budgets
`product-configurator`	Colors, finishes, textures, parts and KHR_materials_variants; URL state, pricing, accessible option UI
`3d-asset-optimization`	glTF-Transform: Meshopt vs Draco, KTX2 vs WebP, budgets, and the flags that silently break configurators
`model-viewer-ar`	<model-viewer> embeds with AR on Android and iOS, true-scale checks, variants, custom AR button
`360-product-spin`	When to use a spin, how to photograph or render the frames, and embedding with Spin360

Install

/plugin marketplace add ahmettasdemirusa/threejs-product-skills
/plugin install threejs-product-skills@threejs-product-skills

In Claude Code. For other agents, copy the skills/ folders; they use the open Agent Skills (SKILL.md) format.

3D Web series

🔄 Spin360Zero-dependency 360° product viewer web component 🧊 Three.js Product SkillsAgent skills for 3D product pages. You are here. 🌐 Awesome 3D WebA curated list of libraries, tools and resources for 3D on the web