https://makismkuous-bot.github.io/tags/three.js/ Recent content in Three.js on Fanssen Notes https://makismkuous-bot.github.io/ https://makismkuous-bot.github.io/ Hugo zh-cn Sat, 23 May 2026 00:00:00 +0000 https://makismkuous-bot.github.io/posts/aibestapp-site-story/ Sat, 23 May 2026 00:00:00 +0000 https://makismkuous-bot.github.io/posts/aibestapp-site-story/ <h2 id="这不是一个普通网站">这不是一个普通网站</h2> <p>第一次打开 aibestapp.top 的人，通常会以为这是一个 AI 资讯站或者工具导航站。这么说也没错，但仔细一逛就会发现——这其实是一个工具箱。</p> <p>我的初衷很简单：做一个自己能用的、有实用价值的网站，而不是那种从别处搬运内容、同质化严重的&quot;伪站点&quot;。aibestapp.top 集成了 AI 工具导航、API 可用性检测、性格测试、网页小游戏，还有后续计划添加的教程文章模块。看起来杂，但每个功能都是我自己写出来的原创东西，这一点让我觉得踏实。</p> <h2 id="技术栈的选择逻辑">技术栈的选择逻辑</h2> <p>这个站的技术选型比较有意思。先说首页，打开就能看到一个 3D 粒子动画，不断旋转变化，视觉效果还算可以。这个动画是用 Three.js 写的，纯前端渲染，不需要后端资源支撑。</p> <p>选择 Three.js 其实不是网站本身的需要。一个工具导航站，静态页面就够了，搞什么 3D 动画？但做个人项目的好处就在这里——你不必事事都从产品最优解出发。我刚好在学 Three.js，想找个实战项目练手，就直接拿首页当了试验场。技术选型这件事，在大厂项目里得考虑团队协作、维护成本、稳定性一堆东西，到了自己的项目，就可以任性一点，想用什么就用什么。</p> <p>首页以外的子页面，我全部用了纯静态 HTML/CSS/JavaScript，没有引入任何前端框架。这个决定有几个实际好处：第一，没有构建步骤，写完了直接在浏览器打开就能预览，开发效率极高。第二，部署极其简单，把文件扔到 Nginx 的静态目录下，配个 HTTPS 就完事了。第三，零运行依赖，不存在版本冲突或者依赖包出问题的情况。</p> <p>部署方面，服务器放在了香港，用 Nginx 做反向代理，HTTPS 证书通过 Certbot 自动续期，全程自动化。后端目前是零——整个站点全部静态，这也是为什么我敢说&quot;零维护成本&quot;。</p> <h2 id="四个核心功能模块">四个核心功能模块</h2> <p>目前网站有四个主要页面，每个都有自己的定位和用途。</p> <p><strong>Toolbox —— AI 工具导航</strong></p> <p>这是站点的核心入口。我整理了一批常用的 AI 工具，按照功能分类做了导航。跟市面上的导航站不同，这里收录的工具都经过我自己实际使用和筛选，不是广撒网式的收录。每个工具我会写上简要的使用场景和体验评价，帮助访问者快速判断是否适合自己。</p> <p><strong>Key Checker —— API 密钥可用性检测</strong></p> <p>这个工具源于我自己的一个痛点。做 AI 相关开发，手头经常有多个 API Key，时间久了分不清哪些还能用、哪些已经过期。于是我写了一个检测工具，输入 API Key，它会自动调用 10 个常用 API 端点逐一验证，返回每个端点的可用状态。</p> <p>技术实现上就是纯前端的 AJAX 请求，没有后端代理。这样做的好处是用户的 Key 不会经过我的服务器，隐私方面更安全。缺点是受浏览器跨域限制，部分 API 端点无法直接检测，这些还在想办法优化。</p> <p><strong>MBTI 性格测试</strong></p> <p>一个轻量级的 MBTI 测试工具。这个功能做得比较简单，就是标准的八维题目，用户回答完自动计算并展示性格类型。没有做后台数据统计，也没有用户系统。</p>