次世代开发体验!用Trae玩转Three.js三维世界与MCP黑科技

我正在参加Trae「超级体验官」创意实践征文,本文所使用的 Trae 免费下载链接:www.trae.com.cn/?utm_source...

前言

Trae最近的04.21版本 更新了很多内容,包括上下文能力增 、规则系统 、Agent 能力升级 、以及MCP 支持上线 ; 其中MCP 支持上线 功能很吸引我,之前使用过blender的mcp(文章链接)感觉还不错,这次trae也支持mcp后我迫不及待的来体验一下。

项目初始化

使用trae的Builder功能

Builder功能所做的内容包括:

  • 在当前位置下生成项目基本目录文件
  • 安装项目所需的依赖
  • 初始化Threejs模版demo

一个让我惊艳的点👍️👍️👍️👍️,在npm run dev时出现了报错(node版本不匹配),Builder 功能会自动识别并安装和切换匹配的node版本,然后自动重新npm run dev。

紧接着点击左侧预览即可在trae中查看项目运行状态

3D模型创建

使用Trae的MCP功能实现

1. 安装Blender-MCP插件

点击@智能体,选择Builder with MCP

点击添加更多工具

搜索blender,点击右侧➕安装

将下面这段代码复制到输入框中后点击保存即可

此处需要提前安装uv管理包,py环境、blender软件以及blender-mcp配置,详细教程可参考我之前的文章,此处不多赘述,地址:juejin.cn/post/749096...

json 复制代码
{ 
  "mcpServers": {
      "blender": {
          "command": "uvx",
          "args": [
              "blender-mcp"
          ]
      }
  }
}

添加完成

2. Blender-MCP使用

trae对话框中选择Builder with MCP,然后输入建模内容即可,同时注意blender中的blender-mcp插件要处于运行状态

同时trae还在我没提出需求的前提下给出了加载的代码,会主动思考用户下一步操作,点个赞👍️

问题修复

此时打开webview一片黑,问一下trae是怎么回事。

为了方便ai查找问题,可以使用@Web功能将Threejs的官方文档喂给他,同时使用@File添加上下文,如果有本地的文档的话也可以使用@Doc通过 URL 或上传 .md / .txt 文件创建文档集。

点击全部应用后,完美解决👍️👍️👍️

项目优化

1. 配置个人与项目规则

本文使用Threejs开发可以基于当前项目情况配置规则,方便ai更好的理解和解决需求,同时也可以让trae帮我们实现这个rules。

点击右上角⚙️设置,选择规则

选择创建项目规则-project_rules.md

让trae来帮我吗补充rules

2. 使用Github MCP自动创建仓库并提交

在MCP市场中搜索Github,并安装。

配置Access Token(地址:github.com/settings/to... ),填写至MCP配置项中。

对话框中选择Github MCP,ai会自动在终端中执行git相关命令,同时创建仓库。 仓库地址:github.com/xin-cyber/t...

总结

作为最早一批Trae用户(当时还是mac端的海外版),发现trae在逐渐变好,功能也在不断完善,这次大更新对用户体验有较大的提升,尤其是MCP市场 这个功能,很大程度上降低了用户使用其他三方MCP工具的门槛;同时Agent 功能也在变得好用,包括内置的Builder 和自定义Agent;个人与项目规则也会很大程度上规范了ai的回答,减少不必要的沟通成本;美中不足就是部分模型需要排队,但是trae本身是免费的基于这点,排队也可以理解,最后祝Trae越来越好🎉🎉🎉

相关推荐
cczixun1 天前
智能体怎么接进业务系统?2026 MCP 工具调用实战:从对话到数据库
落地·智能体·mcp
EatFan1 天前
GitHub Trending 三连观察:AI 编码智能体进入“周边生态”竞争阶段
人工智能·驱动开发·github·mcp·superpowers·github trending·spec kit
Java的搬运工1 天前
2026 AI Agent 实战:五层架构、MCP 工具调用与十条避坑清单 合集 - AI行业观察
人工智能·架构·智能体·大模型应用·langgraph·aiagent·mcp
EatFan2 天前
AI Agent 上生产前先加三道闸门:审批、限权、可回放的工程实践
人工智能·python·算法·多智能体·ai agent·mcp·harness
無a伟2 天前
彻底搞懂ToolCalling、MCP,Skills的核心区别,能力上的层层封装
大数据·agent·mcp·toolcalling·skills
cpolar技术支持2 天前
服务器上的 Nginx 只想改配置却不敢动?把 Nginx-UI 跑起来,用 MCP 让 AI 助手帮你安全改配置,再用 cpolar 把面板短时开给自己
nginx·ai·cpolar·mcp·nginx-ui
code_Bo3 天前
多 Agent 协作最大的坑不是模型,是失忆
ai编程·cursor·mcp
agent开发分析3 天前
MCP vs Skill vs Plugin:AI工具生态三种形态,一篇讲透怎么选
agent·mcp
像我这样帅的人丶你还3 天前
📱iPhone Duo 开屏动画咋实现的?
javascript·webgl·three.js