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

最新推荐文章于 2025-11-20 22:20:53 发布

原创最新推荐文章于 2025-11-20 22:20:53 发布 · 937 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ai #AI编程

AI工具专栏收录该内容

9 篇文章

订阅专栏

前言

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配置，详细教程可参考我之前的文章，此处不多赘述，地址：https://juejin.cn/post/7490969521827381260，

{ 
  "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（地址：https://github.com/settings/tokens ），填写至MCP配置项中。
在这里插入图片描述

对话框中选择Github MCP，ai会自动在终端中执行创建仓库并执行git相关命令，示例中最终提交的
仓库地址：https://github.com/xin-cyber/trae_blender

在这里插入图片描述

总结

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