Add interactive 3D elements to Mira slide canvases with auto-rotation and drag/zoom controls.
npx skills add https://github.com/sandeco/mira-animator --skill mira-3d
Please help me install this Agent Skill. Skill: mira-3d Source: https://github.com/sandeco/mira-animator/tree/main/agents/mira-3d Command: npx skills add https://github.com/sandeco/mira-animator --skill mira-3d
Adiciona um elemento 3D real dentro do card de um slide do Mira: o objeto gira sozinho, o usuário pode arrastar para rotacionar e dar zoom, e o card fica limpo, com o 3D ocupando a maior parte da altura útil. A Skill oferece a escolha entre CSS 3D puro, Three.js procedural e glTF (quando o usuário fornece um .glb ou aceita buscar modelos gratuitos na web), com suporte a servidor HTTP para modelos locais.
Diga "/mira-3d" para aplicar um elemento 3D interativo ao canvas de um slide.
High-intent search queries and answers about installing and using this skill.
To add an interactive 3D model to a slide, you can use a canvas that supports continuous auto-rotation and user-driven drag-to-rotate and zoom interactions. This creates a clean layout where the 3D object occupies most of the useful height.
Displaying glTF files in a web-based slide canvas is best handled by running a local HTTP server. This approach properly loads local .glb models and provides presentation launcher guidance for rendering the interactive 3D elements.
Yes, you can use Three.js procedural 3D objects without external files. This approach generates 3D elements directly in the browser, providing perpetual motion loops and OrbitControls interactions without needing local .glb models.
WebGL supports user-driven drag and zoom controls for 3D presentations through OrbitControls. These controls enable drag-to-rotate and zoom interactions with continuous animation loops, while disabling panning to keep the slide card layout clean.
Local glTF slide presentations fail to load 3D models due to browser security restrictions on local file access. You must launch a local HTTP server to properly fetch and render local .glb files within the slide canvas.
The difference between CSS 3D and Three.js procedural rendering lies in complexity. CSS 3D offers lightweight transformations, while Three.js provides advanced procedural 3D generation with perpetual motion loops and robust WebGL-based OrbitControls.
NJUxljPresent and control HTML content on remote OpenClaw nodes via a local HTTP server and bridge.
KILWA73Integrate hardware-accelerated 3D scenes into React apps with @react-three/fiber.
MCERQUASet up Three.js canvas pages with asset loading and state persistence.
NITRR-OfficialIntroduce Three.js fundamentals for creating and rendering 3D scenes.
