vercel-labs/react-three-fiber

Renderizador 3D React Three Fiber para json-render. Use ao trabalhar com @json-render/react-three-fiber, construindo cenas 3D a partir de especificações JSON, renderizando malhas/luzes/modelos/ambientes ou integrando Three.js com catálogos json-render.

O que é react-three-fiber?

O vercel-labs/react-three-fiber é uma habilidade especializada para uso com agentes de IA que integra o React Three Fiber (R3F) ao ecossistema json-render. Ela permite que desenvolvedores e ferramentas de IA criem cenas 3D complexas a partir de especificações JSON, renderizando elementos como malhas (meshes), luzes, modelos 3D e ambientes. Baseada no Three.js, essa habilidade abstrai a complexidade da programação 3D tradicional, oferecendo uma API declarativa e componentizada para construir cenas interativas. É ideal para pipelines de renderização automatizada, prototipagem rápida de interfaces 3D e integração com catálogos de ativos 3D de forma programática. Suporta a definição de propriedades como geometria, materiais, animações, iluminação e câmeras através de JSON, sendo compatível com workflows que utilizam a biblioteca @json-render/react-three-fiber.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/react-three-fiber

Installed? Explore more Programação e Desenvolvimento skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que react-three-fiber faz?

Renderizador 3D React Three Fiber para json-render. Use ao trabalhar com @json-render/react-three-fiber, construindo cenas 3D a partir de especificações JSON, renderizando malhas/luzes/modelos/ambientes ou integrando Three.js com catálogos json-render.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

vercel-labs/core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

vercel-labs/react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

vercel-labs/react-native

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.

vercel-labs/react-pdf

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.

vercel-labs/remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

vercel-labs/shadcn

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.

vercel-labs/zustand

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

Habilidades Relacionadas