ホーム » T-Saitoh » バイブコーディングによる越前焼の試作システム

バイブコーディングによる越前焼の試作システム

投稿者: in T-Saitoh, コンピュータ 投稿日:

ジュニアドクターにて越前焼の試作システムを作りたい

ジュニアドクター(2025)にて指導している中学生の生徒さんから「越前焼の試作システム」を作りたいといった要望があり、Google Gemini を使ったバイブコーディングによりシステムを作ってもらった。

最初に基礎的なJavaScriptの説明を行った後、THREE.js だと3次元表示を簡単に作れる…といったことが分かったので、プロンプトに与える内容などの経過を見せながら、システムを作っていってもらった。

今回 改めて、バイブコーディングの説明のために、システム構築までのプロンプトを再現してみた。

THREE.js を用いた立体表示

VSCode に、Gemini Code Assist などをインストールした環境でプログラムを作成する環境を構築。

  • JavaScript と THREE.js を用いて、立方体を表示する index.html を作って。
    • 立方体を表示する index.html ファイルを作成しました。このファイルをウェブブラウザで開くと、緑色の立方体が回転しているのが確認できます。
  • 立方体の影が解るように、照明を追加して。
    • index.html ファイルが照明と影を含むように更新されました。以下の変更を加えました：
      1. レンダラー: 影マッピングを有効にし、より柔らかい影のために影マップタイプを THREE.PCFSoftShadowMap に設定しました。
      2. カメラ: 影がより良く見えるようにカメラの位置を調整しました。
      3. 立方体: マテリアルを THREE.MeshPhongMaterial に変更して光に反応するようにし、castShadow を有効にしました。
      4. 光源: 影を落とす THREE.DirectionalLight を追加し、その影のプロパティを設定しました。
      5. 平面: 立方体の下に影を受け取る水平な平面を追加しました。ウェブブラウザで index.html ファイルを開くと、照明と影のある立方体を確認できます。
    • https://tsaitoh.net/~t-saitoh/jd2025/step1/

マウス操作

  • 自動で立体が回転する処理を取り除いて、マウス操作で視点を変更できるようにして。
    • index.html を修正し、立体の自動回転を停止した上で、マウス操作（左クリックで回転、右クリックで平行移動、スクロールでズーム）による視点変更を可能にしました。主な変更点は以下の通りです：
      1. OrbitControls の導入: THREE.OrbitControls ライブラリを追加し、マウスでの直感的なカメラ操作を可能にしました。
      2. 自動回転の削除: animate 関数内にあった cube.rotation.x および y の加算処理を取り除きました。
      3. 慣性（Damping）の有効化: 操作に滑らかさを持たせるため、controls.enableDamping = true を設定しています。これで、マウスを使って自由に視点を動かせるようになっています。
    • https://tsaitoh.net/~t-saitoh/jd2025/step1-1/

越前焼のシステム

THREE.js を使ったシステムを簡単に作れることが確認できたので、越前焼の断面の座標をベースに回転体を表示するプログラムを作らせてみる。

  • JavaScript の THREE.js を用いて、回転体を表示するプログラムを作りたい。
    回転体の断面図の座標は、5点からなり、
    X0=(0,0),X1=(4,0),X2=(6,2),X3=(7.5,5),X4=(8,8)とする。X5=(4,-1)として、
    X0,X1,X2,X3,X4を直線で結んだ線と、X1,X5を直線で結んだ線で、Y軸を中心とした回転体を表示するプログラムを作成して。

  • 自動で立体が回転する処理を取り除いて、マウス操作で視点を変更できるようにして。
    • https://tsaitoh.net/~t-saitoh/jd2025/step2-1/
    • プロンプトに一度に作りたいものを指導しても、細々としたところで違ったものができる。
      X0～X4,X1,X5を結んだ直線と伝えたけど、X0～X5を結ぶ閉曲線で表示されている。

      • X0～X4を結ぶ直線とX1,X5を結ぶ直線で回転体を表示するように修正を指示。
  • 画面を2つに分けて、左側に3次元形状、右側に断面図を表示するようにして。
  • 断面図の点X1,X2,X3,X4,X5の座標をマウス操作で変更できるようにして。
  • X0,X1,X2,X3,X4の直線をスムージングして。

作りながら、最終的にはこのデータで 3D プリンタで出力させたいとのことで、厚さの変更や、3D形状データのダウンロード機能の追加などを指導する。

この後、指導した生徒さんが、お父さんの指導のもと、こちらから途中で色々なアドバイスも与えて、改良した最終形が以下の作品。

3Dプリンタで出力

プログラムの作成にあたり与えた座標が X0=(0,0),X1=(4,0),X2=(6,2),X3=(7.5,5),X4=(8,8),X5=(4,-1) だったけど、印刷したらすごく小さく3D印刷された。指の先にのるサイズ。このままだと単位が mm みたい。ということで、実際の印刷時には 7倍サイズに拡大して3D印刷している。

AI利用での様々な制限

ジュニアドクターでの指導にあたりコーディングには Gemini を使ってもらったけど、生徒さんのアカウントでは「13歳未満は Gemini は使えない」という制限があるため、指導に協力してもらったお父さんのアカウントを使いながらの作業となった。

今回、バイブコーディングの説明用に Gemini を使って途中経過のページを改めて作成したけど、Gemini も進化して Gemini3 とかが使えるけど、無課金状態なので「1日当たりの使用制限を越えた」とかで、途中で Gemini 2.5 Flash-lite などに切り替えたが、これでも上限越え。最後のスムージングなどは Microsoft Copilot に切り替えて作成している。Claude Code は、同じ Google アカウントに紐づいているからか、最初から課金してね…って言われたぞ。

タグ: ,