設計用のCADデータ（STEPやIGES）を、Web上で表示したり、3Dシミュレータで活用したい。

そのためには、CADデータをそのままWebに公開するのではなく、Webで扱いやすい3Dモデルに変換し、用途に合わせて整えることが重要です。

本記事では、無償で利用できる3D CADソフト「FreeCAD」を使って、STEPやIGESなどのCADデータを読み込み、Blenderで扱える3Dモデルへ変換する方法を紹介します。

変換した3Dモデルは、Blenderで軽量化やマテリアルなどを調整したうえで、Web上の3Dシミュレータに活用できます。

「CADデータは持っているけれど、Webや3Dシミュレータでどう活用すればよいかわからない」という方は、ぜひ参考にしてください。

CADデータをそのままWebで使えない理由

STEPやIGESなどのCADデータは、設計や製造のために作られたデータです。

一方、Webブラウザ上で3Dモデルを表示する場合は、ブラウザで扱いやすいデータに変換する必要があります。

特に3Dシミュレータでは、単純に形状を表示するだけではなく、ユーザーが商品を切り替えたり、パーツを組み合わせたり、色や仕様を変更したりします。

そのため、CADデータをWebで利用する場合は、次のような作業が必要になります。

• CADデータを3Dモデルへ変換する
• Webで扱いやすいポリゴン数に調整する
• マテリアルやテクスチャを設定する
• 必要に応じてUVを調整する
• シミュレータで利用するパーツ単位に整理する

そこで活用できるのが、FreeCADやBlenderといった3Dソフトです。

FreeCADでCADデータを3Dモデルに変換する

FreeCADは、無償で利用できるWindowsでもMacでも使用できるオープンソースの3D CADソフトです。

STEPやIGESなど、さまざまなCAD形式のデータを読み込むことができます。

CADデータをすでに持っている場合、FreeCADを中間ツールとして利用することで、CADデータをその先の3D制作やWeb活用につなげることができます。

FreeCADについて詳しく知りたい方は、公式サイトも確認してみてください。

【FreeCAD 公式ページ】
https://www.freecad.org/index.php?lang=ja

FreeCADからBlenderへ。CADデータをWeb用の3Dモデルにする

CADデータ読み込み

FreeCAD上で「file > open」からデータを読み込みます。
主に以下の形式を読み込むことが可能です。詳しくはウェブサイトをご覧ください。

3D Manufacturing Format (*.3mf)
3D Studio mesh (*.3ds)
Alias Mesh (*.obj)
Autodesk DWG 2D (*.dwg)
Autodesk DXF 2D (*.dxf)
BREP format (*.brep *.brp)
Binary Mesh (*.bms)
Collada (*.dae)
Common airfoil data (*.dat)
STEP with colors (*.step *.stp)
Stanford Triangle Mesh (*.ply) 
Wavefront OBJ – Arch module (*.obj) 

Blenderで3Dモデルを整える

FreeCADから書き出したデータをBlenderに読み込みます。

Blenderでは、Webで利用する3Dモデルとして必要な調整を行います。

・ポリゴン数を減らして軽量化する
・不要なパーツを削除する
・パーツを整理する
・マテリアルを設定する
・必要に応じてUVを調整する
・Web表示に適した状態に調整する

特にWebGLを利用した3D表示では、3Dモデルのデータ量が表示速度や操作性に影響します。

CADデータをWebで活用する場合は、形状を正確に再現することだけでなく、「Webで快適に動かせる3Dモデルにする」という考え方が重要です。
※だれでもシミュレータはBlenderから書き出したobjデータに最適化しています。

BlenderからOBJなどの形式で書き出す

Blenderで3Dモデルを整えたら、Webで利用するための形式に書き出します。
たとえばOBJ形式など、利用するシステムに対応した形式で書き出すことができます。
blenderからobjへの書き出しについて：だれでもシミュレータ構築マニュアルはこちら

「だれでもシミュレータ」では、Blenderで作成・調整した3Dモデルを登録し、Web上で商品を組み合わせたり、仕様を変更したりできる3Dシミュレータを構築できます。

glTF形式で書き出せば、マテリアル（質感）情報を保持したまま『スタティックオブジェクト』として登録できます。パーツの組み替えが不要な展示用モデルなら、この方法が最短ルートです。

CADデータから3Dシミュレータを作る流れ

ここまでの作業を整理すると、CADデータからWeb上の3Dシミュレータを作る流れは次のようになります。

1. STEPやIGESなどのCADデータを用意する
2. FreeCADでCADデータを読み込む
3. FreeCADから3Dモデルを書き出す
4. Blenderに3Dモデルを読み込む
5. ポリゴン数やマテリアルなどを調整する
6. BlenderからWeb利用に適した形式で書き出す
7. 3Dモデルを「だれでもシミュレータ」に登録する
8. パーツや仕様を設定してシミュレータを構築する
9. Web上に公開する

つまり、CADデータを持っている企業でも、CADデータをそのままWebに公開するのではなく、3Dモデルとして整えることで、Web上のシミュレータへ活用できます。

Blenderで作った3Dモデルから、Webシミュレータを作る

「だれでもシミュレータ」は、Blenderで作った3Dモデルを使って、商品用の3Dシミュレータを構築できるシステムです。

プログラミングを一から行わなくても、3Dモデルを登録し、シミュレータで使用するパーツや組み合わせ、仕様などを設定できます。

たとえば、商品の色や素材を変更したり、複数の商品パーツを組み合わせたり、完成した内容を保存したりといった使い方ができます。

具体的な登録手順や、データのアップロード方法、シミュレーターの構築ガイドについては、以下の公式マニュアル（スタートアップガイド）で詳しく解説しています。
だれでもシミュレータ 公式操作マニュアル

「データはできたけれど、どうやってサイトに埋め込むの？」 「価格はどうやって表示させるの？」 そんな疑問は、公式マニュアル：スタートアップガイドですべて解決できます。
登録から公開まで、ステップバイステップで進めたい方はぜひ活用してください。

CADデータをお持ちの場合も、FreeCADやBlenderを使って3Dモデルを準備すれば、商品をWeb上で見せるだけでなく、実際に「選ぶ」「組み合わせる」「比較する」といった体験につなげることができます。

CADデータをWebで活用したい方へ

CADデータは、設計・製造のためのデータです。
それをWebで活用するには、Webで扱いやすい3Dモデルへ変換し、用途に合わせて整える必要があります。

FreeCADは、STEPやIGESなどのCADデータを扱うための入口として利用できます。

そして、Blenderで3Dモデルを整えることで、WebGLによる3D表示や、3Dシミュレータなど、さらにさまざまな用途へ展開できます。

「CADデータはある。次に何をすればWebで商品を動かせるのかわからない」という場合は、まずは3Dモデルを準備するところから始めてみてください。

5分で体験。3Dシミュレータを作ってみる

Blenderで作った3Dモデルがあれば、すぐに始められます。
3Dモデルをアップロードして、商品やパーツを登録・設定。Web上に公開するまでの基本操作を、実際に体験できます。

➡︎ 【3Dシミュレータの作り方を見る】

➡︎ 【デモシミュレータを見る】

自社の商品を3Dシミュレータにしてみたい方は、お気軽にご相談ください。

➡︎ 【オンラインデモを申し込む】

まとめ

STEPやIGESなどのCADデータをWebで活用するには、そのまま公開するのではなく、Webで扱いやすい3Dモデルへ変換することが重要です。

FreeCADでCADデータを読み込み、Blenderで3Dモデルを整えることで、WebGLによる3D表示や3Dシミュレータなどへ活用できます。

CAD → FreeCAD → Blender → 3Dモデル → だれでもシミュレータ

CADデータを持っている企業にとって、3Dデータは設計だけでなく、Web上で商品を伝え、選んでもらうための資産としても活用できます。

ー

Webで表示できる様になったCADデータ、次はレイアウトシミュレータにしてみませんか？

平面図と組み合わせ、3Dレイアウトを体験する

「だれでもシミュレータ」にユーザーが自由に家具を追加・削除・移動ができる、そしてレイアウト用に間取り図もアップできる、レイアウトシミュレータのご案内ページはこちら

難しい操作は一切なし。手持ちの「間取り図画像」を3D化して、誰でも1分で家具配置ができるシミュレーター

ランキング

機能アップデート

• 

  「競合に提案内容を知られたくない」。特定の顧客だけに3Dシミュレーターを限定公開して、商談の成約率を高める方法

• 

  難しい操作は一切なし。手持ちの「間取り図画像」を3D化して、誰でも1分で家具配置ができるシミュレーター

• 

  Amazon・楽天・Yahoo!ショッピングの売上UP。シミュレーターから直接カートへ誘導する「相互リンク」の仕組み

• 

  家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：アイテム追加編

• 

  家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：表示切り替え編

もっと見る

3Dシミュレーターの作り方

• 

  Blenderで3Dシミュレータを作る｜その③ マテリアルの準備

• 

  Blenderで3Dシミュレータを作る｜その② モデリング用オブジェクト

• 

  Blenderで3Dシミュレータを作る｜その① Blenderってなに？

• 

  3Dシミュレーターの費用は何で決まる？｜開発費を考えるときに知っておきたいこと

• 

  Shopify×3Dシミュレーターでカスタマイズ商品を販売する仕組み｜Draft Order API連携

もっと見る

おすすめの使い方

• 

  ブランドサイトに「ARで見てみる」を追加する｜商品をWeb上で体験してもらう方法

• 

  水栓メーカーの活用事例｜1商品から始めるWeb AR

• 

  Shopifyで見積を自動化する方法｜オーダーメイド商品や法人向け販売を効率化

• 

  ShopifyのDraft Orderとは？通常注文との違いや活用シーンを解説

• 

  Shopifyの商品コンフィギュレーターとは？仕組みや種類、導入に向いている商品を解説

もっと見る