用Obsidian做记忆库+Three.js渲染

把AI Agent具象化成一个桌面宠物（Desktop Pet）其实比想象中好玩，但我之前折腾的这个Catbot在视觉上一直有个硬伤：它的那条“机械腿”渲染得极其违和。为了解决这个视觉Bug，我尝试了一套“手绘草图 → Gemini生成工程图 → Claude Opus编写代码”的链路，结果出乎意料地高效。

这次实操最核心的逻辑是：不要试图用纯文字描述让AI去猜复杂的工业结构，因为那会导致随机性太强，生成的结果往往像个畸形的肉团。

具体的落地工作流

一、从低保真手绘切入
我先花了大概15分钟随手画了一张机械腿的构思草图。虽然画得粗糙，但它定义了关节的连接方式和整体轮廓。这是给AI提供的第一个“锚点”，比写100个形容词都管用。

二、利用Gemini生成多视角技术图纸
直接把草图喂给Gemini，目的是把手绘图转化为具有工业感的四视图（顶视、侧视、前视、后视）。我使用的提示词如下：

I 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?

Gemini输出的这份模拟示意图（Mock Schematic）精度极高，直接把我的随手涂鸦变成了看起来像模像样的产品设计图。

三、通过Claude Opus实现3D代码落地
有了这份精确的四视图后，我将图片和详细的结构描述发给了Claude Opus。因为Catbot的底层架构是基于 Three.js 构建的，我要求它根据图纸重新编写腿部的几何模型代码。

这次实操中，Three.js 的顶点坐标调整是最麻烦的，但得益于前一步有明确的视觉参考，Opus 生成的代码在适配现有架构时，Bug 率降低了很多，基本一次性就跑通了。

技术实现细节与踩坑点

• 记忆层实现： Catbot 的记忆库是挂载在一个本地的 Obsidian Vault 上的。这意味着它能实时读取我的笔记，通过 RAG（检索增强生成）实现长短期记忆的共存。
• 渲染性能： 在 Three.js 中处理这种带有机械细节的模型时，如果多边形数量过多，浏览器端会有明显的掉帧。建议在导出模型或编写代码时，尽量精简 Mesh 的面数。
• 交互逻辑： 目前的语音激活机制响应时间在 1.5s - 2.5s 左右，虽然能用，但这种延迟在模拟“宠物”互动时会让人感觉到明显的机器感，后续需要优化流式传输的端到端延迟。

总结目前的方案架构

• 感知层： 语音识别 → 文本
• 认知层： LLM + Obsidian Vault (知识库/记忆)
• 表现层： Three.js (3D 渲染) → 浏览器显示

从最初那个渲染诡异的 1.0 版本，到现在的 4.0 版本，最大的感悟就是：在做 AI 驱动的视觉项目时，“图像 → 图像 → 代码” 的链路远比 “文字 → 代码” 稳定得多。如果你也在尝试部署类似的 AI Agent，建议在视觉定义阶段多用草图辅助。