{"slug": "catbot-building-a-3d-ai-pet-with-gemini-and-three-js", "title": "Catbot: Building a 3D AI Pet with Gemini and Three.js", "summary": "A developer built a 3D AI pet called Catbot using Gemini and Three.js, employing a hybrid human-AI workflow that involved hand-sketching a robotic leg, using Gemini to generate multi-view technical schematics, and then feeding those schematics into Claude 3 Opus to produce Three.js geometry and materials. The key insight is that a sketch-to-schematic-to-code pipeline prevents the uncanny valley effect and saves hours of prompt engineering.", "body_md": "# Catbot: Building a 3D AI Pet with Gemini and Three.js\n\nThe gap between a \"cool idea\" and a renderable 3D asset is usually a lack of orthographic data. To fix this, I stopped relying on generic prompts and moved to a hybrid human-AI design workflow. I spent 15 minutes sketching a rough concept of the robotic leg by hand. The sketch was crude, but it established the mechanical pivot points and the aesthetic I wanted.\n\nTo turn that sketch into something an LLM could actually interpret for code generation, I used [Gemini](/en/tags/gemini/) as a technical illustrator. I fed the sketch into Gemini with a specific request for multi-view schematics:\n\n```\nI created this robotic cat leg and I need some good technical drawings of top, side view, front view and back. Can you make me a good technical drawing I can use to share my idea?\n```\n\nThe result was a high-fidelity mock schematic. This is the critical step in any AI workflow involving 3D assets: you cannot jump from a 2D sketch to a 3D model without an intermediate \"blueprint\" phase. The schematic provided the necessary spatial references (top, side, and front views) that acted as a ground truth for the next stage.\n\nOnce I had the technical drawings, I moved to [Claude](/en/tags/claude/) 3 Opus. Since Catbot is built using Three.js, I needed the model to generate the actual geometry and materials in JavaScript. I provided the Gemini-generated schematic along with a detailed description of the existing Catbot architecture.\n\nFor those trying to implement similar 3D components, here is the general logic I used to bridge the schematic to the Three.js scene:\n\n1. **Reference the Schematic:** Feed the multi-view image to the LLM to define the bounding box and pivot points.\n\n2. **Define Mesh Primitives:** Instead of asking for a \"leg,\" I asked for specific `THREE.CylinderGeometry`\n\nand `THREE.BoxGeometry`\n\ncomponents that matched the proportions of the drawing.\n\n3. **Implement Constraints:** I defined the rotation axes for the joints to ensure the leg moved realistically rather than clipping through the body.\n\nThe difference was immediate. The \"Catbot the 4th\" iteration finally looks like a coherent piece of machinery rather than a rendering error.\n\nThe internal logic of the pet is where it gets interesting. By connecting the AI to an Obsidian vault, the pet has a persistent memory of our interactions. However, the personality layer—which I've tuned to be a bit \"sassy\"—sometimes creates a friction point where the AI refuses to give a straightforward opinion on its own upgrades.\n\nIf you're building an LLM agent with a visual front-end, don't trust the AI to \"imagine\" the geometry. Use the sketch → schematic → code pipeline. It saves hours of prompt engineering and prevents the \"uncanny valley\" effect in 3D renders.\n\n[Next Testing pipelines that take 30 minutes to run aren't suffering →](/en/threads/3009/)", "url": "https://wpnews.pro/news/catbot-building-a-3d-ai-pet-with-gemini-and-three-js", "canonical_source": "https://promptcube3.com/en/threads/3016/", "published_at": "2026-07-25 02:28:32+00:00", "updated_at": "2026-07-25 02:40:43.312875+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "developer-tools"], "entities": ["Gemini", "Claude 3 Opus", "Three.js", "Catbot"], "alternates": {"html": "https://wpnews.pro/news/catbot-building-a-3d-ai-pet-with-gemini-and-three-js", "markdown": "https://wpnews.pro/news/catbot-building-a-3d-ai-pet-with-gemini-and-three-js.md", "text": "https://wpnews.pro/news/catbot-building-a-3d-ai-pet-with-gemini-and-three-js.txt", "jsonld": "https://wpnews.pro/news/catbot-building-a-3d-ai-pet-with-gemini-and-three-js.jsonld"}}