Hello3dmcp Frontend

Hello3DMCP前端

Three.js可视化应用程序，让Claude通过MCP实时控制3D模型。

特征： 交互式旋转/缩放•实时MCP更新

______________________________________________________________________

快速开始

要求： Node.js v18+、npm和 hello3dmcp服务器 跑步

npm install
npm run dev

打开 http://localhost:5173 --应用程序自动连接到MCP服务器 ws://localhost:3001.

______________________________________________________________________

生产

npm run build      # Creates optimized dist/ folder
npm run preview    # Preview the production build locally

Netlify部署

______________________________________________________________________

项目结构

src/
├── Application.js        # Main app + WebSocket integration
├── SceneManager.js       # Scene & model manipulation
├── WebSocketClient.js    # Server communication
├── Model.js              # Model class
├── CameraController.js   # Camera controls
├── RotationController.js # Rotation handling
├── AreaLight.js          # Lighting
├── RayPicker.js          # Click/touch interactions
├── InteractionModeManager.js
├── constants.js
├── main.js               # Entry point
├── style.scss
└── utils/
    ├── color/
    └── coordinates/

public/models/            # 3D model assets

______________________________________________________________________

WebSocket协议

注册

在连接时，前端会注册其会话：

{ "type": "registerSession", "sessionId": "" }

命令（服务器→ 前端）

changeColor · changeSize · scaleModel · changeBackgroundColor · setKeyLightIntensity · setKeyLightColor ·\[详见MCP服务器文档\]

状态查询

服务器请求状态：

{ "type": "requestState", "requestId": "", "forceRefresh": false }

前端响应：

{ "type": "stateResponse", "requestId": "", "state": { ... } }

______________________________________________________________________

发展

1. 启动 MCP服务器
2. 跑 npm run dev
3. 打开 http://localhost:5173?sessionId=

______________________________________________________________________

故障排除

______________________________________________________________________

相关

• hello3dmcp服务器 --控制此前端的MCP服务器

______________________________________________________________________

许可证

麻省理工学院——欢迎投稿！