Claude Code で 3D モデリング｜Three.js・OpenSCAD の実践手順

Claude Code が 3D モデリングで使えるわけ

Claude Code は「コードベースを読んで、ファイルを編集し、コマンドを実行する」AI コーディングツールだ（公式: code.claude.com）。チャットに質問するだけでなく、プロジェクトのディレクトリ構造を把握したまま複数ファイルを同時に書き換え、ビルドコマンドを実行して結果を確認するまでを一気通貫で行う。

3D モデリングでこの能力が活きる理由は 3 点ある。

1. マルチファイル編集: Three.js プロジェクトでは src/scene.js・src/camera.js・src/materials.js が連動しているが、Claude Code はすべてのファイルを把握しながら横断的に変更を加える。
2. コマンド実行: npm run build や openscad --render model.scad を直接叩いてエラーを即座に特定し修正できる。
3. ライブラリ理解: Three.js・OpenSCAD・Blender Python の公式 API を習得しているため、API 名や引数の誤りをリアルタイムで補正する。

従来は「公式ドキュメントを開く → API を調べる → コードを書く → エラーをデバッグする」の 4 工程が必要だったが、Claude Code を使うと「仕様を伝える → コードを受け取る → 実行して確認」の 3 工程に圧縮できる。複雑な 3D ライブラリでは調査・デバッグ削減の効果が特に大きい。

対応する 3D ライブラリとツールの全体像

Claude Code は言語・フレームワークを問わないため、主要な 3D ライブラリすべてで活用できる。

本記事では需要が特に高い Three.js・OpenSCAD・Blender Python の 3 系統に絞って実践手順を解説する。

Three.js × Claude Code — ブラウザ 3D シーンを作る手順

Three.js は WebGL の複雑な API を抽象化した JavaScript ライブラリで、ブラウザ上でリアルタイム 3D を実現できる（公式: threejs.org）。

プロジェクトのセットアップ

まず Vite + Three.js のプロジェクトを用意する。

npm create vite@latest my-3d-project -- --template vanilla
cd my-3d-project
npm install three
claude

Claude Code を起動したら、最初のプロンプトでプロジェクト全体を認識させる。

このプロジェクトは Vite + Three.js で構成されています。
main.js に基本的な 3D シーンを作ってください:
- WebGLRenderer (antialias: true、shadowMap 有効)
- PerspectiveCamera (fov: 75、near: 0.1、far: 1000)
- DirectionalLight (intensity: 1.5、shadow 有効) + AmbientLight (intensity: 0.4)
- Y 軸で回転するボックス (BoxGeometry 1×1×1) とフロア平面
- requestAnimationFrame アニメーションループ
- ウィンドウリサイズ対応

Claude Code はこれだけの指示でレンダラー初期化・カメラ設定・ライティング・アニメーションループを含む完成したコードを生成する。

代表的なプロンプトパターン

ジオメトリのランダム配置:

シーンに 10 個のランダム配置された球体を追加してください。
半径は 0.2〜0.8 でランダム、マテリアルは MeshStandardMaterial で
ランダムな色 (HSL で色相 0〜360、彩度 70%、明度 50%) を使ってください。

カスタムシェーダーの実装:

ShaderMaterial を使って Y 座標に応じてグラデーションする
カスタム頂点シェーダーを実装してください。
下部が青 (0,0,1)、上部がオレンジ (1,0.5,0) になるよう
varying で色を補間してください。GLSL コードも含めてください。

ビルドエラーが出た場合はパイプで渡すだけで自動修正できる。

npm run build 2>&1 | claude -p "このエラーを修正してください"

Claude Code はエラーログを解析してソースを直接書き換え、再ビルドして確認まで行う。

OpenSCAD × Claude Code — パラメトリックモデルをコードで設計する

OpenSCAD はコードで 3D モデルを定義するパラメトリックモデリングツールで、3D プリント用パーツ設計に特に向いている（公式: openscad.org）。すべての設計がコードなので Claude Code との相性が抜群だ。設計変更も「寸法を変えてください」の一言で対応できる。

基本的なワークフロー

mkdir my-parts && cd my-parts
touch enclosure.scad
claude

enclosure.scad に以下の仕様でケースを作ってください:
- 外寸: 幅 80mm × 奥行 60mm × 高さ 30mm
- 壁厚: 2mm
- 上面にラズベリーパイ Zero 2W のネジ穴
  (M2.5、取付ピッチ 58mm × 23mm)
- 前面に USB Micro-B の開口部 (幅 12mm × 高さ 5mm)
- 底面に M3 ナット用ヒートインサート穴
  (d=4.7mm、深さ 4mm) × 4 箇所
- パラメータは変数として切り出して再利用しやすくすること

Claude Code は wall_t・pcb_pitch_x などのパラメータ変数を冒頭に定義した .scad コードを生成する。寸法変更はファイル冒頭の変数を書き換えるだけで完了する構造になる。

CLI でのレンダリングと自動修正

openscad --render enclosure.scad -o enclosure.stl 2>&1 | claude -p "エラーを修正して"

エラーがあれば Claude Code が原因を特定して .scad を直接修正する。「修正 → レンダリング → 確認」の反復作業をほぼ自動で回せるため、OpenSCAD の構文を深く覚えなくても設計が進む。

Blender Python × Claude Code — スクリプトで 3D を自動化する

Blender は Python API (bpy) を内蔵しており、オブジェクト生成・マテリアル設定・レンダリングまでをスクリプトで完全に自動化できる（公式: docs.blender.org/api/current）。Claude Code はこの bpy モジュールの複雑な API を正確に扱えるため、スクリプト生成に非常に有効だ。

スクリプト生成の基本手順

touch blender_scene.py
claude

Blender Python (bpy) スクリプトを作ってください:
- シーンをクリアして新しいコレクションを作成
- 20 個の異なる形状 (cube/sphere/cylinder/cone をランダム) を配置
- 各形状に Principled BSDF マテリアルを割り当て
  (Base Color/Metallic/Roughness をランダム)
- HDRI 環境テクスチャを World ノードで設定
  (パスは変数 HDRI_PATH として切り出す)
- Cycles レンダラーで 1920×1080、サンプル数 128 でレンダリングして
  output.png に保存

生成されたスクリプトは Blender のスクリプトエディタに貼り付けるか、コマンドラインで実行できる。

blender --background --python blender_scene.py

バッチレンダリングへの応用

上のスクリプトを拡張して、異なるライティング設定
(昼間/夕方/夜間/スタジオ) で 4 パターンをループレンダリングし、
output_day.png / output_sunset.png のように設定名付きで保存してください。

Claude Code はループ処理・ファイル命名・エラーハンドリングを含む完成したスクリプトを一度に生成する。Blender Python の bpy.context.scene.render や bpy.data.worlds["World"] といった深い API 知識がなくてもバッチ処理を構築できる。

CLAUDE.md で 3D プロジェクト設定を固定する

Claude Code はプロジェクトルートの CLAUDE.md ファイルをセッション開始時に自動で読む（公式: メモリとインストラクション）。3D プロジェクト固有の設定をここに書いておくと、毎回プロンプトで説明する手間が省ける。

# CLAUDE.md — 3D Project Settings

## 技術スタック
- Three.js r168 (WebGPU renderer 非使用、WebGLRenderer 固定)
- Vite 5 + TypeScript 5、Node.js 20.x

## 3D 設計規約
- 単位: メートル (1 unit = 1m)
- 座標系: Y-up
- ライティング: DirectionalLight + HemisphereLight を基本構成
- Shadow: CastShadow / ReceiveShadow は明示設定必須

## 命名規則
- ジオメトリ変数: <name>Geometry
- マテリアル変数: <name>Material
- メッシュ変数: <name>Mesh

## ビルドコマンド
- 開発: npm run dev
- ビルド確認: npm run build

この設定により Claude Code は Three.js のバージョン・単位系・命名規則を最初から把握して作業するため、ファイルをまたいでもコードの一貫性が保たれる。

3D 開発に効くプロンプトの書き方

Claude Code を 3D プロジェクトで使う際に意識すべきポイントを整理する。

1. 座標系と単位を明示する: 「Y-up 座標系、単位はメートル」と伝えないと異なる基準でコードを生成する場合がある。Three.js はデフォルトで Y-up だが、Blender はデフォルトが Z-up のため特に重要だ。
2. ライブラリのバージョンを伝える: Three.js r168 以降では一部 API が変更されており、バージョン情報があると古い書き方を避けられる。
3. 出力形式を先に指定する: 「TypeScript + 型定義付き」「ESModules 形式」「コメント付きで可読性重視」などを事前に伝えると後からの修正が減る。
4. 段階的に依頼する: 「まずベースシーンだけ」→「次に照明追加」→「最後にアニメーション」のように段階的に依頼すると、複雑なシーンでも整理されたコードが得られる。

エラーが出た場合はターミナル出力をそのままパイプで渡すのが最速だ。

# ビルドエラーを渡して自動修正
npm run build 2>&1 | claude -p "このエラーを修正してください"

# OpenSCAD レンダリングエラーを渡す
openscad --render model.scad 2>&1 | claude -p "エラーを修正して"

# Blender スクリプトのトレースバックを渡す
blender --background --python scene.py 2>&1 | claude -p "Python エラーを修正して"

活用事例

Claude Code × 3D の組み合わせが実際に使われている場面を挙げる。

データ可視化: 株価・気温・人口などの時系列データを 3D グラフ (Three.js 製 BarChart 3D) で表現するダッシュボード。CSV データを渡してシーンを自動生成する用途で採用が増えている。

3D プリント用パーツ設計: OpenSCAD でラズパイケース・カスタムブラケット・フィラメントホルダーなど、寸法仕様を自然言語で渡すだけで .stl 生成まで自動化できる。製品開発のプロトタイピング工程を大幅に短縮できる。

ゲームプロトタイプ: Three.js + Cannon.js (物理エンジン) でブラウザゲームのプロトタイプを短時間で構築する。「重力・衝突判定・スコア表示・モバイル対応」をまとめて指示することで、数時間でプレイアブルなプロトタイプが完成する。

インタラクティブポートフォリオ: デザイナーやクリエイターが、コードを深く学ばずに Three.js のパーティクルシステムやモーフィングアニメーションをポートフォリオサイトに組み込む用途にも活用されている。「ポートフォリオサイトらしい浮遊するパーティクル背景を Three.js で実装して」と指示するだけで動作するコードが得られる。