我使用 React Three Fiber 和 Gemini AI 构建了一个空间 3D 知识图谱 🌌

Source: Dev.to

嗨，开发者们！👋

我一直觉得标准的笔记应用把我们的思维强行压进不自然的线性列表。我们的想法是相互关联、混沌且具有空间感的。所以，我花了过去几周时间构建了一个实验来解决这个问题。

它叫 Echo Archive。

它是一个空间化的知识管理系统，您的笔记以 3D 星座的形式存在。

🛠 技术栈

我想让它保持轻量但视觉沉浸。

• 前端: React 18 + Vite
• 3D 引擎: Three.js 与 React Three Fiber (drei)
• AI 核心: Google Gemini AI（通过 API）
• 样式: Tailwind CSS + Lucide Icons
• 存储: LocalStorage（隐私优先，无云数据库）

🧠 AI 集成

最酷的部分是集成 Gemini。因为我使用的是 gemini-2.5-flash 模型，我实现了：

• 自动标签: AI 读取笔记并根据上下文建议分类。
• 智能续写: 写作卡壳？AI 帮你完成句子。
• 摘要: 自动在长笔记顶部生成 TL;DR 概要。

🌌 挑战：移动端 3D 导航

让 3D 轨道控制在手机屏幕上感觉自然非常棘手。我必须仔细映射触摸事件，确保可以单指平移宇宙、双指缩放，同时不误触发文本编辑器。

🔗 试一试

我刚发布了 v1.0，期待大家对导航手感的反馈！

在线演示:

欢迎告诉我你对空间界面的看法。它是未来趋势还是仅仅是噱头？

干杯！