Skip to content
Get packs

WebGL 3D Object

Builds a lit, floating 3D faceted object for web pages using WebGL and Three.js

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

What it does

When installed, the agent can build a real three-dimensional object for a web page, such as a faceted gem-like shape with proper lighting, shadows and depth, instead of faking 3D with CSS tricks. It writes the HTML, CSS and Three.js code, including gentle rotation and floating motion, resize handling, and cleanup code. The skill's rules also cover reduced-motion settings and how to tune material shininess and glow to match a brand.

Great for

  • Front-end developers adding a striking 3D hero visual to a landing page
  • Designers who want a product-like or tech-style 3D element prototyped in code
  • Teams who want a reusable WebGL pattern that respects reduced-motion preferences

Skip it if

  • Sites that need only flat images or simple CSS effects, since the WebGL code adds weight and complexity
  • Low-end mobile-heavy audiences, because the skill itself warns that high pixel ratios and large shadow maps can hurt performance
  • Users with no coding setup who expect a ready-made embeddable file, since the output needs the Three.js library installed and integrated

Try asking

  • “Add a floating faceted 3D icosahedron with blue rim lighting to my homepage hero section”
  • “Create a metallic 3D product-style object for our pricing page with subtle rotation”
  • “Build a soft ceramic-looking 3D shape with a shadow under it for a feature block”
Step-by-step guide: how to use WebGL 3D ObjectInstall, 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.

    webgl-3d-object.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip webgl-3d-object.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip webgl-3d-object.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

  • State the brand mood (premium metal, soft ceramic, or glowing tech) so the agent picks suitable metalness, roughness and emissive values
  • Ask for reduced-motion handling and disposal code to be kept, since the skill's checklist expects them
  • Keep the object secondary to foreground text and calls to action, as the skill advises

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • 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.