使用AI代理构建交互式游戏风格3D作品集

在本管线中，使用的是 Verdent 智能体平台。虽然它支持 VS Code 和 JetBrains，但推荐使用桌面应用程序，因为其精简的界面让专注于整体架构而非底层语法的开发者更容易上手。

该工作流的核心引擎是 Claude 4.5 Opus。由于其强大的推理能力和生成复杂代码结构的高效性，该模型特别适合 3D Web 应用。

• GitHub 连接：将你的 GitHub 账户关联到 Verdent，让智能体自动管理版本控制和分支创建。
• 工作区管理：该配置最强大的功能之一是能够并行运行多个工作区。这让你可以在一个分支中开发辅助工具（如素材优化器），同时在另一个分支中构建主作品集，避免了标准 AI 代码编辑器中常见的代码冲突。

打开一个新的工作区，提示智能体创建一个使用 glTF-transform 库的本地 Next.js Web 应用。目标是一个简单的"拖放"界面，自动完成以下操作：

• 将纹理转换为 WebP 格式。
• 优化网格以减少顶点数。
• 将纹理尺寸调整为最大 1k 或 2k 分辨率。

运行智能体并让它构建文件结构。完成后，你可以启动本地服务器并将一个较大的 GLB 模型拖入界面。

最佳实践：高保真需求时使用 2k 或 4k 纹理，但确保优化器在最终 Web 构建中对其进行压缩，以保证网站在移动设备上的响应性能。

不要直接跳入代码编写，而是将智能体切换到规划模式。这会强制智能体分析需求、反复检查自身逻辑，并给出一份路线图。

• 审查架构图：智能体会生成网站架构的技术图表。
• 降低复杂度：AI 智能体默认常常建议多页布局。为了保持现代"游戏风格"的感觉，指示智能体将体验整合为一个高影响力的入口屏幕和一个主查看器。

使用文字和参考图片的组合来传达你的愿景。此作品集的一个高效提示结构包括：

• 入口页面：一个包含缩略图和"进入作品集"按钮的着陆页。
• 角色查看器布局：分屏方式，3D 角色占据左侧 60%，信息卡占据右侧。
• 导航：用于切换角色的左/右按钮，以及自动将角色适配屏幕高度的系统。
• 视觉风格：纯黑背景、向远处渐隐的无限网格地面，以及漂浮的"闪光"或"星点"粒子效果以增加深度感。

当智能体提问时，指定以下配置：

• 网格样式：选择向黑色渐隐的无限网格。为了品牌一致性，你可以稍后要求更改网格颜色（例如改为橙色）。
• 粒子样式：选择"漂浮闪光"以在背景中创造微妙的运动感。
• 用户交互：禁用自动旋转。角色只应根据用户操作来旋转，以提供更具触感的"游戏菜单"体验。

确保你的角色模型（GLB）包含奔跑或待机动画。应指示智能体在角色加载后自动触发这些动画。

在文件资源管理器中导航到你的项目文件夹，按如下方式放置素材：

• 模型：将优化后的 .glb 文件放入 public/models 目录。
• UI 图片：将缩略图或头像图片放入 public/images 文件夹。

为智能体提供角色数据列表，包括：名称和描述、创建所用工具，以及源文件或外部视频内容的链接。智能体不仅会填充数据结构，还会自动修正文件路径。例如，如果你提供了 .jpg 文件但代码期望的是 .png，智能体会检测文件夹中的文件并自动更新代码，无需手动干预。

在浏览器中加载项目。如果 3D 模型显得太小或信息卡位置不对，对浏览器窗口进行截图。

截图提示法：将截图上传回智能体并提供具体的改进意见。例如："右侧卡片目前在黑色背景上；将它移动到 3D 查看器上方覆盖显示。同时，让模型适配屏幕全高并正常缩放。"

为了摆脱通用外观，应用自定义品牌风格：

• 品牌化：请求"橙色主题"以匹配特定的品牌颜色。
• 组件升级：不使用简单的文字链接指向外部视频，而是让智能体创建"YouTube 缩略图卡片"，提供内容的视觉预览。