【無料公開】3Dモデルの色付けツール【ブラウザとSTEPファイル】【AI】

2026年6月2日 09:16

今回制作したもの

特徴として「完全クライアントサイド処理（ブラウザ内完結）」の3Dモデルの色付けツールです。
ブラウザ起動⇒WEBページを開く⇒STEPファイルの読み込み
目的まで最短距離で行います。
面倒なユーザー登録や、3Dモデルを外部サイトにアップロードすることによるセキュリティ上の懸念といった、手間とリスクを取り除きました。

自分一人では当然出来るはずもなく、基本的にコードはAIに書いてもらうVibe Codingといわれるやつですね。
AIのありがたみを強く感じます。

テスト用のSTEPファイル

テスト用のSTEPファイルを保存していますので、以下よりダウンロードし自由に使用してください。
サンプルモデルはnoctua様からダウンロードしてきた3Dモデルとなります。

セキュリティポリシー等により外部データの利用に制限がある場合は、MISUMI様やNoctua様(過去記事参照)等からボルトやファンなどのデータをダウンロードして利用することを推奨します。

製作背景

私用で3Dモデルへの色付けを行う必要がありました。
CADソフトがあれば、行うことはできるのですが問題もあります。
・CADだと多機能な分、色変更動作が面倒
・CADソフトを持っていない部門でも実施したい
これらもあって、ブラウザ完結できればそれが一番いいなと考えていました。
CADライセンスやソフトインストール等に配慮した形となります。

自分が要件を満たしそうなソフトを調べた限りでは、登録が必要だったり、データのアップロードが必要でセキュリティ的に問題があったり、CADデータからエクスポートできるファイル形式ではなかったりと制限が多いため、製作を試みました。

開発コンセプト

汎用フォーマット(STEP)ファイルが読み込める
ソフトのインストールが不要（ブラウザで動作可能）
社内のセキュリティが承認できる
（社内ローカルサーバーで動作可能、モデルを送信しない）
色付けした情報の保存・読み込み
軽量・セキュアなデータ共有（3Dモデルそのものを送受信せず、色情報のJSONのみをやり取りすることで、機密保持と通信負荷軽減を両立）

マウス操作一覧

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

操作概要

YouTubeへ動画を置いておきます。

1.STEPファイル読み込み

ファイルを開くを選択しSTEPファイルを選択。

2.色の指定

カラーパレットから色を選択。
上部【ブラシカラー】から自由に色を選ぶことも可能。

3.モデルへの色付け（左クリックで単一箇所、ドラッグで連続範囲）

色変更を行いたいモデルの面を選択すると色変更が可能。
ドラッグで連続して面の色を変更することも可能。

4.色情報を保存（.json）

【カラーを保存】をクリックすると、現在の色情報を持ったjsonファイルがダウンロード。

5.色情報を呼び出し

【カラーを読み込み】からjsonファイルを選択で保存したときの色情報を呼び出し。

6.その他、測定やメモなど

クイックツールから

プログラムコードについて

GitHubへ全て保存しております。

リンク先：

注意：
当方、非SEのため、フォークやプルリクエストなどの対応がうまく出来ない場合がありますので、ご了承ください

ローカルでの動作について

ライブラリの関係上、ローカルサーバーが必要となります。
リポジトリ内の全データをダウンロードして、index.htmlをブラウザ上で実行しただけでは動作しませんのでご注意ください。

こんな人に使ってほしい

製造現場や品質管理部門の方：
CADライセンスがないPCでも、手軽に形状確認や指示出しを行いたい。
機密保持を重視する方：
外部サーバーにデータをアップロードせず、ローカル環境（ブラウザ内）で完結させたい。

注意点

回転の制限（対応済み）

使っているライブラリの関係上、Z軸方向の回転が真上・真下で操作がロックされます。
解決を試みましたが、ライブラリの仕様上の制限により、現時点では解消に至っておりません。
⇒対応完了しました。

保存形式は色情報のjsonのみ（モデル非対応）

色付け状態での3Dモデルの保存には対応しておりません。
必ず使用したSTEPファイルを読み込んでから、色情報の呼び出しを行ってください。

3Dモデルインポート時の制限

1ファイルしか読み込みが出来ません。
読み込んでいる状態からさらにSTEPファイルのインポートを行うと、それまで読み込んでいたモデルは消されます。

色付けデータ（json）の読み込み

モデルとjsonデータはポリゴン数で整合の判定をしています。
CADで形状を変化させた場合、ポリゴン数が変化することでjsonデータが読み取れなくなったり、色付けが正しく復元できない場合があります。

今後の発展見込み

STEP AP214はモデル情報に加えてメッシュに対する色情報も持っています。
そのためインポート・エクスポートの形を整えれば、現状のSTEP + jsonの形式ではなく、色情報を持ったSTEPファイルの書き出しも出来るかもしれません。

カメラ操作をもう少しCAD寄りに（Z軸上下死点でロックがかけられないように）、視点制御が自由になれば良いのですが今解決方法が見つかっていません。
画面操作をTrackballControlsに変更し、対策完了しました。

ただし、自分の用途的にひとまずは満足し、これから技術的に難易度が跳ね上がりそうなこともあり現時点でリリースしました。

余談

zennへの記事も公開しました。