[2026/8/30]

[WEB App] DXF 3D Viewer - dxf-parser + Three.jsによるブラウザ完結型DXFビューア

[WEB App] DXF 3D Viewer - dxf-parser + Three.jsによるブラウザ完結型DXFビューア

DXF 3D Viewer

CADの標準フォーマットであるDXF（Drawing Exchange Format）ファイルを、ブラウザ上で2D/3D表示するビューアです。サーバーへのアップロード不要で、ファイルはすべてブラウザ内で処理されます。

dxf-parserでDXFファイルを解析し、Three.jsで13種のエンティティ（LINE, POLYLINE, CIRCLE, ARC, ELLIPSE, TEXT, DIMENSION, INSERT等）をリアルタイム描画。レイヤー別の色分けと表示ON/OFF、ビュー切替、スクリーンショット出力に対応しています。

ツール

スクリーンショット

サンプル図面の表示（PC表示）：

DXF 3D Viewer - サンプル図面

Point Cloud Viewer出力の断面DXF：

DXF 3D Viewer - Point Cloud Viewer断面DXF

動画（GIF）:

DXF 3D Viewer - 動作動画（GIF）

sample data

サンプルデータは、「クワバラ設計企画」のWEBサイトよりお借りしています。

特徴

13種のDXFエンティティ描画

LINE, LWPOLYLINE, POLYLINE, CIRCLE, ARC, ELLIPSE, POINT, 3DFACE, SOLIDの基本形状に加え、TEXT/MTEXT（テキストラベル）、DIMENSION（寸法線）、INSERT（ブロック参照の再帰展開）に対応。一般的な2D/3D図面の主要要素を網羅しています。

レイヤー管理とAutoCAD Color Index対応

DXFファイルに定義されたレイヤー構造をそのまま再現。各レイヤーのAutoCAD Color Index（ACI）に基づく色分けと、レイヤー単位での表示ON/OFF切替が可能です。図形レイヤーだけ表示して寸法を非表示にするなど、確認用途に応じた柔軟な表示制御ができます。

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

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

日本語DXFのShift-JIS自動判定

日本のCADソフトが出力するShift-JIS（ANSI_932）エンコーディングのDXFファイルを自動検出し、文字化けなく日本語レイヤー名・テキストを表示します。UTF-8のDXFにも対応。

Point Cloud Viewerとの連携

自作のPoint Cloud Viewer（点群ビューア）で生成した断面プロファイルDXFを、別途CADソフトを起動せずにブラウザ内で即座に確認できます。

フルレスポンシブUI

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

使い方

  1. DXFファイルをドロップまたは選択する
    • 画面左上の破線エリアに .dxf ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択します。ビューポート領域へのドロップにも対応しています。
DXF 3D Viewer - 使い方：1. DXFファイル選択
  1. ファイル情報とエンティティを確認する
    • 読み込み完了すると、FILE INFOセクションにファイル名・サイズ・エンティティ数・レイヤー数・バウンディングボックスが表示されます。ENTITIESセクションでは種別ごとの内訳を確認できます。
DXF 3D Viewer - 使い方：2. ファイル情報確認

  1. レイヤーとビューを操作する

    • LAYERSセクションで各レイヤーをクリックして表示/非表示を切替。「All ON」「All OFF」で一括操作。
    • VIEWセクションで「Top (XY)」「Front (XZ)」「Reset」のビュー切替、Grid/Axes/Textの表示切替が可能。
    • マウスホイールでズーム、ドラッグで回転・パン操作。

  2. スクリーンショットを保存する

    • EXPORTセクションの「📷 Screenshot」ボタンで、現在のビューポートをPNG画像として保存します。

対応エンティティ

エンティティ描画概要
LINE✅2頂点の線分
LWPOLYLINE✅軽量ポリライン（閉合対応）
POLYLINE✅3Dポリライン
CIRCLE✅円
ARC✅円弧
ELLIPSE✅楕円（回転対応）
POINT✅点
3DFACE✅三角/四角面（半透明＋ワイヤーフレーム）
SOLID✅ソリッド面
TEXT✅テキストラベル（表示ON/OFF可）
MTEXT✅複数行テキスト（1行目表示）
DIMENSION✅寸法線＋寸法値テキスト
INSERT✅ブロック参照（座標変換・スケール・回転）

技術スタック

  • Astro — サイト構築・ページレンダリング
  • Three.js — 3D描画エンジン、OrbitControls
  • dxf-parser — DXFファイルパーサー
  • HTML5 Canvas — テキストラベルのテクスチャ生成

開発の経緯

自作のPoint Cloud Viewer（点群ビューア）で実装した「断面ポリライン→DXFエクスポート」機能の出力を検証する際、毎回CADソフトを起動するのが煩わしかった。ブラウザ内で即座にDXFの内容を確認できるビューアがあれば、開発サイクルを大幅に短縮できると考え、本ツールを開発しました。

dxf-parserライブラリの調査から始め、Three.jsでの描画、日本語DXFのShift-JIS対応、ブロック参照（INSERT）の再帰展開まで、1日で基本実装を完了しました。

関連ツール

更新履歴

  • [2026/08/30]: 初版リリース。13種エンティティ描画、レイヤー管理、Shift-JIS自動判定、スクリーンショット出力に対応。