Skip to content
Get packs

3D Orbit and Inspect

Make a 3D object lean on hover and lift into a full inspect view on click

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent can build a Three.js web scene where a 3D object gently tilts toward the mouse on hover, and clicking it lifts it into a close-up view you can turn, zoom and put back. It spells out the timing, bounds, keyboard and accessibility rules that keep the hover and click behaviours from conflicting. The skill is a set of instructions plus a reference demo file; it does not run anything on its own.

Great for

  • Front-end developers building product or portfolio pages with a single 3D object
  • Designers prototyping interactive furniture, joinery or product viewers in Three.js
  • Teams who want hover previews and a click-to-inspect mode that do not fight each other

Skip it if

  • Simple static 3D hero meshes with no inspect mode, where the webgl-3d-object skill is a better fit because this one adds unnecessary complexity
  • Camera walkthroughs of whole places, where 3d-virtual-tour is the better match
  • Non-web 3D work (Blender, Unity, game engines) because the instructions target Three.js and WebGL only

Try asking

  • “Build a product viewer where hovering a chair leans the camera slightly and clicking lifts it for full inspection”
  • “Add a click-to-inspect mode to my joinery portfolio piece in Three.js with keyboard and screen-reader support”
  • “Port this hover-lean and inspect behaviour to my own mesh, replacing the demo objects”
Step-by-step guide: how to use 3D Orbit and InspectInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    3d-orbit-inspect-demo.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip 3d-orbit-inspect-demo.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip 3d-orbit-inspect-demo.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start by reusing demo.html as the reference and swap in your own mesh, as the skill suggests, rather than rewriting the interaction from scratch
  • Ask the agent to test touch and mouse separately, since the skill relies on reading the last pointer type rather than media queries
  • Check keyboard and focus behaviour early, because the skill's focus-return rules are easy to break if the copy is hidden during inspect

What's inside

  • agents/openai.yaml
  • demo.html
  • PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.