[WEB App] STEP/IGES/BREP 3D Viewer v2 — occt-import-js(WASM) によるブラウザ完結型CADビューア

STEP / IGES / BREP 3D Viewer

CADの標準交換フォーマットであるSTEP（.step/.stp）、IGES（.iges/.igs）、BREP（.brep/.brp）ファイルを、ブラウザ上で3D表示するビューアです。サーバーへのアップロード不要で、ファイルはすべてブラウザ内で処理されます。

パース処理にはOpenCASCADEのWASMビルド（occt-import-js）を使用し、B-Rep（境界表現）ジオメトリをブラウザ内でテッセレーション（ポリゴン化）してThree.jsで描画します。階層ツリー表示、断面表示、2点間距離測定、GLBエクスポートまで対応しています。

v2アップデート

アセンブリを視覚的に分解する分解図（Exploded View）機能や、製造・金型設計を強力に支援する3機能「肉厚解析」「勾配角解析」「曲率解析」のヒートマップ表示を搭載しました。

ツール

STEP / IGES 3D Viewer

STEP/IGES/BREPファイルをブラウザで3D表示。階層ツリー、断面表示、測定ツール、GLBエクスポート対応。

lain-lab.com

スクリーンショット

STEPファイル — アセンブリ構造（PC表示）：

IGESファイル — パンテオン：

断面表示 + 測定ツール：

測定ツール（MEASURE）の大幅拡張

📏 Distance（距離測定） / 📐 Angle（角度測定） / 📦 Part（パーツ測定） / ◻ Face（面測定）

肉厚解析（Wall Thickness Analysis）:

勾配角解析（Draft Angle Analysis）:

曲率解析（Curvature Analysis）:

動画（GIF）:

sample data

サンプルデータは以下のサイトからお借りしています。

STEP Tools — Sample AP203 Data Files

Sample STEP files for use with AP203 applications. Various geometry types from ST-ACIS, Pro/E, CATIA sources.

www.steptools.com

ADVENTURE Project — サンプルデータ

東京大学 設計用大規模計算力学システム開発プロジェクト。パンテオンのIGES形式CADデータ等を公開。

adventure.sys.t.u-tokyo.ac.jp

特徴

OpenCASCADE WASMによるブラウザ内CADパース

産業用CADカーネルであるOpenCASCADE（OCCT）のWASMビルド（occt-import-js, ~7.6MB）を使用し、STEP/IGES/BREPファイルのB-Rep（境界表現）ジオメトリをブラウザ内で直接テッセレーションします。サーバーサイドの処理は一切不要です。

階層ツリーとパーツ操作

CADファイルのアセンブリ構造をツリー表示。コネクターライン付きのインデント、パーツ数表示、パーツ単位での表示ON/OFF切替に対応。ツリーまたはビューポート上のパーツをクリックすると、ハイライト表示とカメラフォーカスが連動します。

🆕 3D Inspection & 3大解析ツール

製造設計・金型検討・品質管理に威力を発揮するリアルタイム解析ヒートマップ機能を搭載しました。

1. 肉厚解析 (Wall Thickness Analysis)

   • 各頂点から内向き法線方向にレイキャストを放ち、逆側のメッシュ交点までの距離を即座に算出。設定した閾値範囲（Min〜Max）に応じてカラーグラデーション（青→緑→赤）で可視化します。
   • 用途: 樹脂成形品でのヒケ（肉厚過大）や強度不足（薄肉部）の事前検証。

2. 勾配角解析 (Draft Angle Analysis)

   • 基準となる抜き方向ベクトル $\mathbf{v}_{\text{pull}}$ と各ポリゴン法線 $\mathbf{n}$ との交角（または余角）を計算。
   • 抜き勾配が正の領域（キャビ側）、負の領域（コア側）、および指定角度（例: $1.5^\circ$）未満の「アンダーカット／勾配不足リスク領域」を色分け表示します。
   • 用途: 射出成形・鋳造用金型の離型性チェック。

3. 曲率解析 (Curvature Analysis)

   • 頂点近傍の2次曲面近似、または隣接ポリゴン法線変化量からガウス曲率 $K$ や平均曲率 $H$ を推定し、曲率半径 $R = 1/|K|$ または曲率分布をカラーマップ化します。
   • 用途: 意匠面の滑らかさ（C1/C2連続性）の確認や、R面加工難易度の判定。

テッセレーション品質調整

5段階（Coarse/Low/Medium/High/Ultra）の品質設定で、表示精度とパフォーマンスのバランスを調整できます。大規模モデルではCoarseで素早く確認し、詳細確認時にHighに切り替えるといった使い方が可能です。

断面表示（Cross Section）

Three.jsのClippingPlaneによるリアルタイム断面表示。X/Y/Z軸の選択、位置スライダー、フリップ切替で、モデル内部の構造を自由に確認できます。

測定ツール（Distance Measure）

モデル表面の2点をクリックするだけで、3D空間上の直線距離を自動計測。アキシャル方向の差分（$\Delta X, \Delta Y, \Delta Z$）も併せてリアルタイム算出・オーバーレイ表示します。

視覚調整・法線操作

• 法線反転（Flip Normals）: 面の向きが逆転しているメッシュの表示崩れを一括修復。
• ワイヤーフレーム / エッジオーバーレイ: ポリゴン構造の確認、線画ライクな表示の切替。
• マテリアル変更: Standard PBR、Normal Color（法線可視化）、Depth Color等のシェーディングモード切替。

GLBエクスポート

読み込んだCADファイルをGLB（glTF Binary）形式で出力。Three.jsの3Dビューアやゲームエンジンなど、他のツールで利用可能な形式に変換できます。

サーバー送信不要の完全ローカル処理

ドラッグ＆ドロップしたCADファイルはブラウザのメモリ内でのみ処理されます。外部サーバーへファイルをアップロードすることが一切ないため、機密性の高い設計データも安全に閲覧できます。

フルレスポンシブUI

デスクトップでの2カラム表示（左パネル＋ビューポート）から、スマートフォンでの縦並び表示まで対応。

---

使い方

1. CADファイルをドロップまたは選択する

   • 画面左上の破線エリアに .step / .stp / .iges / .igs / .brep / .brp ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択します。ビューポート領域へのドロップにも対応しています。

2. ツリー操作と視点移動

   • ツリー操作: 左パネルの「PART TREE」で特定パーツの非表示、ハイライト設定が可能です。
   • マウス操作: 左ドラッグで回転、右ドラッグでパン移動、ホイールでズームイン/アウト。
   • プリセットビュー: 「VIEW」セクションの Iso / Top / Front / Right ボタンで視点を一発リセット。

3. 分解図（Exploded View）の実行

   • 左パネルの「EXPLODED VIEW」を有効にし、「Explosion Distance」スライダーを動かすことで、アセンブリが一斉に分解・復元されます。

4. 3D Inspection（肉厚・勾配・曲率解析）

   • 肉厚解析: 「WALL THICKNESS」を有効化し、ターゲット肉厚範囲（例: 0.5mm 〜 3.0mm）を指定すると即座にカラーヒートマップ化されます。
   • 勾配角解析: 「DRAFT ANGLE」で抜き方向（+Z, -Z, +Y 等）と目標勾配角（例: $1.5^\circ$）を設定します。
   • 曲率解析: 「CURVATURE」でガウス曲率 / 平均曲率を切り替え、曲面変化度合いを確認します。

5. 断面表示・距離測定

   • 「CROSS SECTION」で断面プレーンを有効にし、スライダーで切断位置を調整。
   • 「MEASURE」で距離測定ツールを起動し、モデル上の任意の2点を選択します。

6. エクスポート

   • 変換結果を他ツールで使いたい場合は「EXPORT」→「💾 GLB Export」をクリックしてダウンロードします。

数式・理論背景 (解析機能)

v2で搭載された解析ツールの計算理論概要です。

勾配角（Draft Angle）

抜き方向の単位ベクトルを $\mathbf{v}_{\text{pull}}$、メッシュ上の各要素（三角ポリゴン）の単位法線ベクトルを $\mathbf{n}$ としたとき、勾配角 $\theta_{\text{draft}}$ は以下のように評価されます。

$$\theta_{\text{draft}} = 90^\circ - \arccos(\mathbf{n} \cdot \mathbf{v}_{\text{pull}})$$

• $\theta_{\text{draft}} > \theta_{\text{target}}$ : 正常な抜き勾配（キャビティ/コア）
• $0 \le \theta_{\text{draft}} < \theta_{\text{target}}$ : 勾配不足リスク領域
• $\theta_{\text{draft}} < 0$ : アンダーカット領域

肉厚（Wall Thickness）

ある頂点 $\mathbf{p}_i$ とその単位内向き法線 $\mathbf{n}_i^{\text{in}} = -\mathbf{n}_i$ について、反対側の表面メッシュ $\mathcal{M}$ との最短交差距離 $d_i$ をレイキャストによって定義します。

$$d_i = \min \{ t > 0 \mid \mathbf{p}_i + t \mathbf{n}_i^{\text{in}} \in \mathcal{M} \}$$

ガウス曲率（Gaussian Curvature）

各頂点における主曲率を $k_1, k_2$ としたとき、ガウス曲率 $K$ および平均曲率 $H$ は以下で与えられます。

$$K = k_1 k_2, \quad H = \frac{k_1 + k_2}{2}$$

対応フォーマット

フォーマット	拡張子	概要
STEP	.step, .stp	ISO 10303 — 3D CAD標準交換フォーマット
IGES	.iges, .igs	Initial Graphics Exchange Specification — レガシーCAD交換フォーマット
BREP	.brep, .brp	OpenCASCADE独自のB-Rep形式

---

技術スタック

• Astro — サイト構築・ページレンダリング
• Three.js — 3D描画エンジン、OrbitControls、EdgesGeometry、ClippingPlane、GLTFExporter
• occt-import-js — OpenCASCADE WASMビルド（STEP/IGES/BREPパーサー）
• Raycaster — パーツ選択、測定ツールの点ピック

---

開発の経緯

前日に開発したDXF 3D Viewerの延長として、3D CADのネイティブ交換フォーマットであるSTEP/IGESに対応するビューアを開発しました。当初はOpenCASCADEをゼロからWASMビルドすることも検討しましたが、バイナリサイズ（100MB超）とビルド難易度の問題から、既存のocct-import-js（~7.6MB）を活用するアプローチを選択しました。

occt-import-jsのCDN読み込みから基本表示まで数時間で完成し、その後階層ツリー、断面表示、測定ツール、GLBエクスポートを追加して1日で全機能を実装しました。

---

関連ツール

DXF 3D Viewer

DXFファイルをブラウザで2D/3D表示。レイヤー管理、テキスト表示切替、スクリーンショット出力対応。

lain-lab.com

Point Cloud Viewer

PLY/LAS/LAZ/PCD/XYZ/CSV点群データのWeb閲覧・編集・エクスポートツール

lain-lab.com

---

更新履歴

• [2026/09/04]: v2.0 リリース

  • 分解図表示機能（Exploded View）を追加。
  • 3D Inspectionツール群（肉厚解析・勾配角解析・曲率解析）を追加。
  • 法線反転、ワイヤーフレーム重ね合わせ表示、各種マテリアルモードを追加。
  • STL / OBJ / GLTF / GLB フォーマットの直接ロードに対応。
• • STEP/IGES/BREP読み込み
  • 階層ツリー
  • テッセレーション品質調整
  • 断面表示
  • 測定ツール
  • GLBエクスポート
  • スクリーンショット出力