3D Web Skill

Teach your AI to build stunning, realistic 3D websites. Turn any photo into a 3D experience. Works with any framework.

Install

npm install 3d-web-skill

That's it. The skill auto-installs itself to OpenCode (.opencode/skills/3d-web/) and copies knowledge files. No extra steps needed.

If you want to customize framework and AI tool detection:

npx 3dskill init

The CLI auto-detects your framework (React, Vue, Angular, Svelte, Astro, Solid.js, Vanilla) and AI tools (Cursor, Claude Code, Windsurf, OpenCode, Copilot, CodeRabbit, Cline, Aider), then installs the right agent instructions and dependencies.

PowerShell users: Use 3dskill init instead of 3d-skill init to avoid parser errors.

Commands

| Command | Description | |---|---| | /3d:hero | Realistic 3D hero with PBR materials, HDR lighting, GSAP entrance | | /3d:model <path> | Load GLB/GLTF with auto-center, auto-scale, OrbitControls | | /3d:animate <target> | GSAP animations on any 3D element | | /3d:particles | GPU particle system | | /3d:convert <selector> | Make any HTML component 3D | | /3d:site | Full 3D website from scratch with scroll animations | | /3d:audit | Auto-fix performance issues | | /3d:image-depth <image> | Photo → 3D parallax (free, browser-only, no API) | | /3d:image-model <image> | Photo → full 3D model 360° (API required) |

Supported Frameworks

React, Next.js, Vue, Nuxt, Angular, Svelte, SvelteKit, Astro, Solid.js, Vanilla

Supported AI Tools

Cursor, Claude Code, Windsurf, OpenCode, GitHub Copilot, CodeRabbit, Cline, Aider

Image → 3D APIs

Meshy.ai, Tripo3D, Stability AI, Rodin (Hyper3D)

CLI

Available as: 3dskill, 3d-skill, or 3d-web-skill

3dskill init       # Install/update skill (auto-detect framework + AI tools)
3dskill update     # Refresh knowledge files
3dskill status     # Show installation status
3dskill remove     # Remove all skill files

License

MIT