金型設計者がVibe codingでSTEPファイル塗り分けビューワーを作った話

はじめに

私はソフトウェアエンジニアではなく、金型設計を生業にしている者です。普段はCADソフトを使って金型の設計をしていますが、「こんなツールがあったら便利なのに」と思うことが日常的にあります。

今回作ったのは STEP Face Painter という、ブラウザ上でSTEPファイルを開いてFace（面）単位に色を塗り分けられるWebアプリです。プログラムの知識は乏しいですが、複数のAIツールを併用したVibe codingで完成させました。
開発期間としては仕事の合間を縫いながら、モデルをメッシュとして読み込んで色付け＋JSON形式の保存・読み出しを行うところまでで2日（5/22～5/24）ほどでした。
追加機能として、3DモデルをB-REP形式での読み込みや、測定ツール、メモ機能などが7日（5/25～5/31）ほど、合計として約10日間の作業となりました。

このツールはインポート時にモデルデータの外部送信を行いません
URL読み込み時のみネットワークを使用しますが、ページ読み込み後はオフラインでも動作します

ライセンス

本ツールは MITライセンス で公開しています。商用・非商用を問わず自由に使用・改変・再配布できます。

使用ライブラリ：

Three.js – MIT License
opencascade.js – LGPL-2.1

実際の動作

なぜ作ったのか

金型を製作するうえで、CAD環境の無い加工部門や品質管理部門等へ製品の注意事項や、部品の加工方法等を伝えないといけないことが多くあります。

設計レビューのときに「この面とこの面は同じ工程で加工する」「ここはネジ穴のシリーズ」といった情報を、図面や口頭ではなく3Dモデル上で色分けして伝えたいと常々感じていました。
また製品開発チームと話しをするときにも、スクリーンショットをエクセルに張り付けてメモ書きを送るとなんてことも多かったです。

既存のCADビューワーでも色分けはできますが、高価なライセンスが必要だったり、登録が必要・モデルのアップロードが必要だったりします。ブラウザで開いてすぐ使えるシンプルなものが欲しかった、それが動機です。

要件として最初から決めていたこと

ツールを使う現場のことを考えると、以下の3点は絶対に外せませんでした。

ファイルをサーバーにアップロードしない
金型の形状データは企業の機密情報です。クラウドサービスにデータを送ることを禁じている会社も多く、どんなに便利でも使えないツールになってしまいます。このアプリはすべての処理をブラウザ内で完結させているため、データが外部に出ることはありません。

完全オフラインで動作する
工場の現場ではインターネットが使えない環境もあります。ローカルサーバーを立てればオフラインでも動き、USBメモリに入れて持ち運ぶことすら可能です。

ユーザー登録が不要
アカウント作成や利用申請が必要なツールは、現場への導入ハードルが一気に上がります。URLを開くだけで使い始められることを目指しました。

マウス操作一覧

左クリック：指定の色で色付け
右クリック：パン移動
マウスホイール：拡大・縮小
Shift + 左右クリック：カメラ回転

作っているうちに面白くなってきた

最初の目的は「面ごとに色を塗る」それだけでした。

ただ、実際に動くものができてくると「どうせなら測定もしたい」「メモも残せたら便利」と、設計現場で感じてきた「あったら嬉しい」機能が次々と形になっていきました。

一方で、機能が増えるほど気をつけたのがUIのシンプルさです。CADソフトの経験がない人でも直感的に使えること、開いた瞬間に何をすればいいかわかること。機能の充実とわかりやすさの両立を常に意識しながら作り進めました。

特にこだわったのが精密な形状測定です。見た目の距離測定ではなく、STEPファイルのB-Rep（境界表現）のジオメトリデータを直接参照することで、CADソフトと同等の精度での測定を実現しています。ポリゴンメッシュに変換した後の近似値ではなく、元の数学的な形状から計算しているため、曲面や曲線上の点でも正確な値が得られます。

3D位置メモは、モデル上の任意の面にメモを貼り付けてCSVで出力できる機能です。「この穴はここから測定すること」「この面は後工程で追加工あり」といった注記を、図面とは別に3Dモデルに直接紐付けて残せます。

気づいたら当初の想定より機能がずいぶん増えていましたが、どれも設計現場で実際に欲しいと感じてきたものなので、作っていて楽しかったです。

何ができるのか

STEPファイルの読み込みと表示

ローカルのSTEPファイルをブラウザにドロップするだけで3D表示されます。サーバーへのアップロードは不要で、すべてブラウザ内で完結します。

Face単位の塗り分け（FaceIDモード）

STEPファイルはB-Rep（境界表現）という形式でジオメトリを持っており、面（Face）ひとつひとつにIDが振られています。このFaceIDを使って、面ごとに個別の色を設定できます。

面モード：クリックした面1枚に色を塗る
パーツモード：ソリッド（部品）単位でまとめて塗る

金型設計でいえば加工の面肌、「研削加工指定」「放電加工指定」「鏡面仕上げ面」といった区分けを視覚化するのに使えます。
複数パーツが入ったファイルだと、モデル単位で色分けを行うなどでしょうか。

パーツツリーによる表示切替

アセンブリ構造のSTEPファイルでは、パーツごとに表示・非表示を切り替えられます。複雑なアセンブリでも見たい部分だけを確認できます。

カラーデータの保存と読み込み

塗り分けた色の情報はJSONファイルとして保存でき、次回読み込んで再現できます。STEPファイルとセットで保管しておけば、レビューのたびに塗り直す必要がありません。

クイックツール

測定モード：2点間の距離やモデルの体積・表面積を計測
断面カット：モデルを任意の平面で切断して断面を確認
3Dメモ：モデル上の任意の位置にメモを貼り付けてメモリストのみをCSVで出力

技術的な構成

私自身はプログラムを書けないので、AIに「こういうものを作りたい」と伝えながら進めました。結果として使われた主な技術は以下のとおりです（AIから教えてもらった内容ベースです）。

opencascade.js

STEPファイルの読み込みとパースに使っているライブラリです。もともとはC++で書かれたCADカーネル「OpenCASCADE Technology（OCCT）」をWebAssemblyに変換したものです。

これによって、サーバーなしでブラウザだけでSTEPファイルを解析し、FaceIDの取得やB-Rep→メッシュの変換ができています。

Three.js

3D表示部分のライブラリです。opencascade.jsで変換したメッシュデータをThree.jsで描画しています。視点操作（軌道コントロール）やエッジ表示、断面カット（ClippingPlane）もThree.jsの機能を活用しています。

Cloudflare Pages

Cloudflare Pagesでホスティングしています。GitHubリポジトリと連携するだけで自動デプロイが設定でき、サーバー費用はゼロです。CDNによる高速配信も無料で使えます。

Vibe codingの進め方

基本的な流れはこうです。

「こういう機能が欲しい」を日本語でAIに伝える
AIがコードを生成する
ブラウザで動かして確認する
動かなかったり、意図と違う動きをしたら、その状況をそのままAIに伝える
2に戻る

設計者として「こういうときに使う」「こういう情報が見えると嬉しい」という用途のイメージは明確にあるので、その部分はAIより私のほうが詳しいです。逆にコードがなぜ動かないかは全くわかりませんが、AIが勝手に直してくれます。

複数のAIツールを使ったのは、得意不得意があったからです。詰まったときに別のAIに投げると解決することもありました。

苦労した点

opencascade.jsは情報が少なく、AIも正確な情報を持っていないことが多かったです。「こう書けばできるはずです」と言われたコードが動かないことが何度もありました。エラーメッセージをそのままAIに貼り付けて「なぜですか？」と繰り返すうちに解決していくのですが、この工程が一番時間がかかりました。
console.logを見て頂ければ、その時の名残が随所にありますね。

今後の予定

解決してない、残課題が1つあります。
パーツ・フェイスの色塗りにおいて、初期はドラッグ時に連続して色塗りができていたのですが、何かの機能実装時にクリックした箇所しか着色できなくなっています。
これはなるべく早いうちに直したいとは思っています。

追加として欲しい機能としては、以下の項目でしょうか。

メモツール使用時、ScreenShotでメモも保存
メモツールのミニウィンドをドラッグで移動
インポート形式の拡張
（IGESは欲しい、STL・OBJは出来れば、X_T・SAB・SATは多分無理そう）
クイックツールの操作感向上（パイメニュー化？）
モバイル環境での操作性向上

おわりに

プログラムを書けない設計者でも、「何を作りたいか」さえ明確であれば、Vibe codingで実用的なツールを作れる時代になったと実感しています。

このツールが同じような課題を持つ設計者の方の参考になれば幸いです。フィードバックや改善提案があれば歓迎します。

ソースコードはGitHubで公開しています。