3D场景生成服务

web3d mcp服务器

MCP服务器，用于网络和广告的3D场景生成，基于React Three Fiber（R3F）构建。

web3d-mcp-server 将简单的英语提示转化为经过验证的结构化场景计划 scene_data，几何合成合同，框架就绪 .jsx 或 .tsx React Three Fiber代码、可导出资产和集成指南。

托管服务器

最快的入门方式——无需安装。

MCP端点：

https://web3d-mcp.onrender.com/mcp

跳转到 使用托管服务器 有关设置说明。

快速导航

它的作用

• 将自然语言场景请求转换为结构化的3D工作流。
• 生产 scene_data 使用相机、灯光、对象、材质、背景、动画和设计标记。
• 支持预览、验证、目标编辑、动画堆叠、优化、几何合成、代码生成、导出和集成帮助。
• 为普通React、Vite和Next.js生成React Three Fiber场景组件。
• 帮助AI助手遵循可预测的、基于工具的流程，而不是从头开始生成原始3D代码。

它帮助了谁

• 前端工程师构建英雄部分、登录页面和产品展示。
• 设计工程师对交互式网络视觉效果和广告概念进行原型制作。
• 想要基于MCP的3D场景工作流的AI应用程序构建者。
• 需要更快的3D场景概念到代码迭代的机构和产品团队。

技术

磁心体

产出生态系统

服务器为以下内容生成资产和指导：

• React三纤维
• Three.js
• @react-three/drei
• Next.js
• 维特
• 普通反应

建筑

此服务器是混合型的，支持两种运行时模式。

本地模式： stdio

• 最适合Claude Desktop、Cursor和其他本地MCP客户端。
• 在开发人员计算机上作为子进程运行。
• 非常适合本地开发和个人工作流程。

远程模式：HTTP流

• 最适合共享团队、浏览器客户端和托管设置。
• 在以下位置显示MCP端点 /mcp.
• 公共托管端点为 https://web3d-mcp.onrender.com/mcp.

推荐管道

笔记：

• edit_scene 可以在之后的任何时间使用 generate_scene 以及之前 generate_r3f_code.
• optimize_for_web 是可选的，但对移动或性能敏感的目标很有用。
• generate_r3f_code 可以返回 SYNTHESIS_REQUIRED, SUCCESS, PARTIAL_SUCCESS，或 ERROR.
• PARTIAL_SUCCESS 表示一个或多个对象回落到红色线框占位符。

工具

服务器当前注册了12个工具。

详细工具参考： tool_information.md

例子

工作示例： quick_example.md

用户提示示例： sample_prompt.md

文件夹结构

存储库结构参考： folder_structure.md

使用托管服务器

服务器是公开托管的，可以随时使用，不需要安装或本地设置。所有12个工具都可用。

托管MCP URL：

https://web3d-mcp.onrender.com/mcp

通过克劳德桌面连接

步骤1——打开Claude Desktop配置文件。

在macOS上：

~/Library/Application Support/Claude/claude_desktop_config.json

在Windows上：

%APPDATA%\Claude\claude_desktop_config.json

如果文件不存在，请创建它。

步骤2——添加远程服务器条目。

{
  "mcpServers": {
    "web3d": {
      "url": "https://web3d-mcp.onrender.com/mcp"
    }
  }
}

如果您已经配置了其他MCP服务器，请添加 web3d 在他们旁边进入 mcpServers 对象。

步骤3--重新启动Claude Desktop。

完全退出并重新启动应用程序。Claude Desktop在启动时连接到远程服务器。

步骤4——验证连接。

打开一个新对话，尝试以下提示：

Generate a 3D scene of a glowing orb floating above a reflective surface.

如果克劳德开始使用像这样的工具 generate_scene_plan 或 generate_scene，连接正在工作。

通过Cursor或其他MCP客户端连接

任何支持远程HTTP流传输的MCP客户端都可以使用相同的URL进行连接：

{
  "mcpServers": {
    "web3d": {
      "url": "https://web3d-mcp.onrender.com/mcp"
    }
  }
}

有关配置文件的确切位置和格式，请参阅客户的文档。

备注

• 服务器托管在Render上，在一段时间不活动后，可能需要30-60秒来响应第一个请求。同一会话中的后续请求将很快。
• 不需要身份验证。

本地安装

仅当您想在本地运行服务器进行开发或自托管时才需要。 对于大多数用例 托管服务器 是更简单的选择。

先决条件

• Node.js 18+
• npm

命令

安装依赖项：

npm install

构建服务器：

npm run build

启动本地 stdio 服务器：

npm run start

运行带有文件监视的开发模式：

npm run dev

通过HTTP流运行开发模式：

npm run dev:http

运行项目健康检查：

npm run health

Claude桌面--本地配置

点克劳德桌面在建成 dist/server.js 文件。

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "web3d": {
      "command": "node",
      "args": [
        "/Users/alex/dev/web3d-mcp-server/dist/server.js"
      ]
    }
  }
}

光标和其他 stdio 客户

使用相同 command 和 args 图案：

{
  "mcpServers": {
    "web3d": {
      "command": "node",
      "args": [
        "/Users/alex/dev/web3d-mcp-server/dist/server.js"
      ]
    }
  }
}

框架支持

TypeScript支持

操作说明

几何缓存

• 合成的JSX可以在本地缓存 .synthesis_cache/geometry_cache.json.
• 缓存是按需创建的。
• 重复的对象和样式组合可以重用早期的几何图形。

状态值

作者

德夫·阿格拉瓦尔

许可证

看 许可证.