VSCodeとBlender MCP使って自然言語のみで小さな街作ってみた

## はじめに
MCPについてあまりにもXに情報が流れてくるので、キャッチアップがてらMCPを使って何か遊べないかなと思い、**Blender MCPを使った簡単な3Dモデルを作成**してみました。

PythonとBlenderを組み合わせたワークフローに興味を持っている方や、そもそもMCPで何ができるのかよくわからないけど視覚的に操作できるものならちょっと触って遊んでみようかなという方は、ぜひ参考にしてみてください。**設定から最初の3Dモデル作成まで30分**もあれば充分にいけると思います。

この記事を通して私が試したVisual Studio Code (VSCode) から直接Blenderを操作できる「Model Context Protocol (MCP)」の設定方法と使い方、作ってみた3Dモデルについて順を追って紹介出来ればと思います。

また、今回使用した「**blender-mcp**」は、VSCodeとBlenderを連携させるための実装で、Githubの["Ahuja/blender-mcp"リポジトリ](https://github.com/ahujasid/blender-mcp)を参考にしています。ただ"Ahuja/blender-mcp"リポジトリを含め**Vscodeを使用した実装に関する情報は調べてもヒットしなかった**ため、自分で試して見ようと思い今回の発信に至りました。

※ちなみにおまけで、Cursorでの設定方法についても書いています。

※MCPを使えば個人で少し遊ぶレベルだとBlender本体を操作することはほとんどないのでBlenderの説明やその使い方の解説などはしないのでご容赦ください。

## MCPとは？
MCPについては巷にたくさんの分かりやすい記事が出ているのでここではあまり説明しませんが、Model Context Protocol (MCP) は、AIとソフトウェア間でやり取りするためにコードを送受信するためのハブみたいなイメージです。

https://modelcontextprotocol.io/introduction

## 環境構築
### 1. 必要なソフトウェアの準備
- [Blender](https://www.blender.org/download/)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Cursor](https://www.cursor.com/ja)でもOK（ただ今回はVScodeでの使用がメインです）

### 2. Blender側の設定
#### 2.1. Blender MCPのaddon.pyファイルのダウンロード
[GitHub（Ahuja/blender-mcp）](https://github.com/ahujasid/blender-mcp)から[addon.pyファイル](https://github.com/ahujasid/blender-mcp/blob/main/addon.py)をローカルに**ダウンロード**

#### 2.2. Blenderを起動し**アドオン**を設定

   - **Edit** → **Preferences** → **Add-ons** → **Install from Disk** を順に選択
   ![blender_setting1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/2766e7bf-76b1-4df0-a684-30614004187b.png)

   ![blender_setting2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/4e30d04d-d591-48b4-afc9-e3a152776b6f.png)

   
   - ダウンロードした**addon.pyを選択**してインストール
   ![blender_setting3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/181cae4c-4c1d-499b-99c3-eadcf539e875.png)
   
   
   - アドオンリストで「**BlenderMCP」を有効化**（**チェックボックスをオン**）

#### 2.3. 設定の確認

  - 3Dビューポートで**Nキー**を押してサイドパネルを表示
  - サイドパネルに「**BlenderMCP**」タブが表示されていれば成功
　![blender_setting4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/39cd08db-4429-40d1-8a46-9d5046428a73.png)


### 3. VSCodeの設定
#### 3.1. uvのセットアップ（Cursorでも共通）
- Windowsの場合はPowerShellを開き、**uvパッケージマネージャー**をインストール
   ```
   # Windowsの場合
   powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
   ```
   
   ```
   # Macの場合
   $ curl -LsSf https://astral.sh/uv/install.sh | sh
   ```

- uvパッケージマネージャーを**PATHに追加**
   ```
   set Path=C:\Users\nntra\.local\bin;%Path%
   ```

- 念のため、以下も実行
   ```
   pip install uv
   ```

#### 3.2. VSCodeプロジェクトの作成

   1. **作業フォルダを作成**（なんでもいいですが私は"blender-craft"といフォルダを作成しました）
   2. VSCodeでこのフォルダを**ワークスペースとして開く**
   3. **.vscode**フォルダを作成し、その中に**mcp.jsonファイル**を作成

- .vscode\mcp.jsonの内容（.vscode\mcp.jsonへのコピペ用）
    ```json
    {
        "servers": {
          "blender": {
            "command": "uvx",
            "args": ["blender-mcp"]
          }
        }
    }
    ```
   ![vscode_setting1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/500268aa-3957-412b-ab72-bc508fb667fd.png)


### 4. おまけ（Cursorを使う場合）

   1. **作業フォルダを作成**（なんでもいいですが私はVScodeと同じ"blender-craft"フォルダを使いました）
   2. Cursorでこのフォルダを**ワークスペースとして開く**
   3. **.cursor**フォルダを作成し、その中に**mcp.jsonファイル**を作成

- .cursor\mcp.jsonの内容（.cursor\mcp.jsonへのコピペ用）
    ```json
    {
        "mcpServers": {
            "blender": {
                "command": "cmd",
                "args": [
                    "/c",
                    "uvx",
                    "blender-mcp"
                ]
            }
        }
    }
    ```
   ![cursor_setting1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/b171ddcb-521b-4fd2-8250-ff64c1812f98.png)
 


## Blenderとの接続
### 1. VSCode（またはCursor）でMCPサーバーを起動

#### VSCodeの場合
- .vscode/mcp.jsonファイル内に表示される「**起動**」というタブをクリック
   ![vscode_setting2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/9cd4cf2f-d4bb-4e2c-bf40-214cbb12137a.png)
 

- 表示が「**実行中**」に変わることを確認
   ![vscode_setting3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/7f5c6e1a-82de-48c6-9c31-e397d92534d9.png)
 

#### Cursorの場合
- **File** → **Preferences** → **Cursor Settings** → **MCP** を順に選択
   ![cursor_setting2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/6fc80452-c3ef-4367-87b7-2e1cf36f52fc.png)
 

- 外側赤枠の**右上の内側赤枠内のスイッチ**を図のように設定し、**左上の内側赤枠内が図のようになっていたらOK**
   ![cursor_setting3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/22856b8b-d641-4864-a2fb-7b1419b5755e.png)



### 2. Blender側で接続を確立させる
- Blenderの3Dビューポートで**Nキー**を押してサイドパネルを表示
- 「**BlenderMCP**」タブをクリック
- 「**Connect to MCP server**」ボタンをクリック
   ![blender_setting4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/358f1ae7-28b3-4f2c-a7ba-1355166e6028.png)

- ボタンの表示が「**Disconnect from MCP server**」に変わったら接続成功
   ![blender_setting5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/a805f331-ece3-471c-a014-c71b17910764.png)



## AIのエージェントモードを使ってBlenderで3Dモデルを作成
VSCode（またはCursor）とBlenderの接続が成功したらAIのエージェントモード（私はVScodeではGitHub Copilotのエージェントモードを主に使用）を活用することで、チャット感覚で自然言語で指示すればBlenderでオブジェクトを生成できます！

### GitHub Copilotの設定（参考：VScode用）
- VSCodeでGitHub Copilotをエージェントモードに設定
![vscode_setting4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/232331fb-b001-4f7d-8cc3-fe9b4aa3e7e7.png)


### 自然言語のみで指示して作成できた3Dモデル
**ビルと青い屋根の家はCursor**から、**それ以外はVScode**から指示をMCPを起動して**チャットのやり取りのみ**で作成しました。**Blenderは一切いじっていない**です。

エージェントモードに設定したAIが私の指示をPythonコードに変換し、MCPを通じてBlenderに送信してくれています。

![blender_image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/6bb3a68a-6747-42fc-8a4b-d01088063b33.png)

![blender_image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/5cfc4afe-bca0-47b1-b212-4bbd6234a885.png)

![blender_image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/05a9f07a-ddad-4f58-988f-e736eb8f0e3d.png)

![blender_image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4044731/a256d9e7-5ea1-48ec-a111-b9c292f53123.png)


## Pythonコードの実行方法（これは興味のある方だけでいいので飛ばしてOKです！）
AIとのチャットでの指示以外にも、直接Pythonコードを書いて実行することもできます。

新しいPythonファイル（なんでもいいですがここでは"first_script.py"）を作成し、以下のコードを入力しました。
```python
import bpy

# 既存のオブジェクトをクリア（任意）
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete()

# キューブを作成
bpy.ops.mesh.primitive_cube_add(size=2, location=(0, 0, 1))
cube = bpy.context.active_object
cube.name = "MyCube"

# マテリアルを作成して適用
mat = bpy.data.materials.new(name="BlueMaterial")
mat.use_nodes = True
principled = mat.node_tree.nodes.get('Principled BSDF')
principled.inputs[0].default_value = (0.0, 0.3, 0.8, 1.0)  # 青色

# マテリアルをオブジェクトに適用
if len(cube.data.materials) == 0:
    cube.data.materials.append(mat)
else:
    cube.data.materials[0] = mat

# ビューポートの表示モードをマテリアルに変更
for area in bpy.context.screen.areas:
    if area.type == 'VIEW_3D':
        for space in area.spaces:
            if space.type == 'VIEW_3D':
                space.shading.type = 'MATERIAL'

print("青いキューブを作成しました！")
```

スクリプトの実行については以下の方法で実施してみてください。
- ファイル全体を選択し、Shift+Enterを押す
- コードの一部を選択してShift+Enterを押す
- 右クリックメニューから「MCP: Run Selection」を選択する

これでコードが実行されると、Blenderにそのコマンドが送信されてオブジェクトを作成できます。

エディター側で通常のターミナルからPythonを直接実行しようとすると「ModuleNotFoundError: No module named 'bpy'」というエラーが発生するので必ずMCPを経由して実行するようにしてください。


## まとめ
VSCode（Cursorも可）とBlenderのMCPサーバーを使って、ほぼBlenderをいじることなく簡単な3Dモデルのオブジェクトを作成することができました。

全体的な感想としては、抽象的な指示をすると、例えば「家を作ってください」みたいな指示だとただシンプルな板を重ね合わせただけのようなものしか出力してくれませんでした。

以下のように少し具体的に書くことで精度が高くなっていきました。

1軒目の家（House1）
- 暖色系のカラースキームで作成（ベージュの壁、赤茶色の屋根）
- 位置：ビルから東側に約15m、北側に約10m離れた場所
- 8m×6mの広さで、1階と2階、三角屋根がある
- 前面にはポーチがあり、周囲には芝生の庭がある
- ドア、窓、煙突なども追加してほしい

また、私は指示が上手くできなかったのですが、人間のような細かいオブジェクトも作成にはテクニックが必要そうです。

トータル的にみてMCPがどのようなものかを試す分には視覚的に見えるのでとてもよい勉強ツールだと思いました。また、技術のキャッチアップをしながらも十分遊べるのでその点でもよかったのかなと思います。

ここまで読んでいただきありがとうございました。

https://github.com/yf591/blender-craft

## Reference
[blender-mcp GitHub](https://github.com/ahujasid/blender-mcp)
[Blender Python API Document](https://docs.blender.org/api/current/index.html)