おすすめの使い方：3DCAD（Rhinoceros/SketchUp等）をWeb表示・サイト埋め込みする方法
2023.08.20
【3D CAD活用ガイド】
Rhinoceros / SketchUp / Solidworks 対応。
「自社サイトへの3D埋め込み」を、開発費ゼロ・ノーコードで実現する方法。
ー
- プログラミング知識不要（OBJをアップするだけ）
- 主要3DCADソフトから簡単エクスポート
- Webブラウザで動く・回せる・色を変える
「3DモデルをWebで見せたいが、やり方がわからない」「外注コストを抑えたい」という方のための実践ガイドです。
ー
「Rhinoceros（ライノセラス）やSketchUpで作った3D CADモデルを、自社サイトのブラウザ上で自由に動かせるようにしたい」と考えたことはありませんか？
これまでは、3DデータをWebサイトで表示させるには、WebGLやThree.jsといった高度なプログラミング知識が必要で、外部の開発会社に依頼すると多額のコストと時間がかかるのが一般的でした。
しかし、「だれでもシミュレータ」を活用すれば、専門知識は一切不要。お使いのCADソフトからOBJ形式で書き出したデータをアップロードするだけで、誰でも簡単に高機能なWeb3DビューワーをWebサイトに埋め込むことができます。
本記事では、3D CADデータをWebブラウザ表示・サイト埋め込みするための具体的な手順と、ビジネスでの活用メリットを分かりやすく解説します。
ー
RhinocerosやSketchUpなど主要CADソフトのWeb3D化に対応
対応ソフト例（Rhinoceros, SketchUp, Solidworks, Fusion360など）
「だれでもシミュレータ（DSIM）」は、業界標準の3D中間書き出し形式に対応しているため、建築・製造・プロダクトデザインなど幅広い分野の主要CADソフトからデータを活用できます。
ー
- 建築・インテリア: Rhinoceros（ライノセラス）, SketchUp（スケッチアップ）, Vectorworks
- 機械・プロダクト設計: Solidworks（ソリッドワークス）, Autodesk Fusion 360, Inventor
- 汎用3D・CG: AutoCAD（3D機能）, Blender
これらのソフトから、形状データと色情報を保持した状態でWebへ移行することが可能です。また、特定の高額なビューワーソフトを導入する必要がなく、使い慣れたCADソフトをそのまま「Web3Dの制作環境」として利用できるのが最大のメリットです。
ー
Web表示に最適なデータ形式「OBJ」とは？
なぜ、CADデータをWebで表示させる際に「OBJ」形式が推奨されるのでしょうか？ その理由は、「汎用性」と「情報保持のバランス」にあります。
- ほとんどのCADソフトが標準対応 OBJ形式は、ほぼすべての3DCAD・CGソフトで書き出しが可能な「中間ファイル」です。特別な変換プラグインを買い足す必要がなく、スムーズにワークフローへ組み込めます。
- 形状（ジオメトリ）と色の切り分け OBJは、3Dの形を作る「.objファイル」と、色や質感の情報を司る「.mtlファイル」がセットになっています。この構造により、Web上でのカラーシミュレーション（色の塗り替え）がプログラム的に制御しやすくなります。
- 軽量でブラウザ負荷が低い CADの元データ（ネイティブデータ）は非常に重く、そのままではブラウザで動きません。OBJに変換することで、Web表示に必要な情報を維持しつつ、閲覧者のストレスにならない軽快な動作を実現できます。
ー
【3ステップ】CADデータをWebサイトに埋め込む具体的な手順
1.だれでもシミュレータの管理画面で3DCADデータを登録
ご使用されている3DCADソフトからobj形式で書き出し、「だれでもシミュレータ」の管理画面から3Dメッシュデータとしてアップし、登録します。
「だれでもシミュレータ」のダッシュボードから3Dメッシュデータとしてアップロードします。
その3Dに組み合わせる、色・素材を設定した「マテリアルデータ」を登録します。
「3Dオブジェクト」にて「3Dメッシュデータ」と「マテリアルデータ」を組み合わせて登録します。
これで表示用のデータ登録ができます。
ー
2.登録した3DデータをWeb3Dとして表示させるためのステージ設定
「だれでもシミュレータ」のダッシュボードからステージ設定を行い、登録した3Dオブジェクトがウェブで見られる様に設定します。
「だれでもシミュレータ」のダッシュボードから「ステージ設定」を選び、ステージに表示したい「3Dオブジェクト」を登録します。
必要に応じてその他データを入力します。
位置なども必要に応じて調整します。
入力が終わったら、ステージ設定時に右上に表示される「公開URL」から、登録した3Dデータを表示できる3Dシミュレータにアクセスします。
このページが3DCADをWeb 3D化した、シミュレータ、コンフィギュレータページになります。
ー
3.iFrameコードを自社サイトに貼り付ける
リンクで設定する
表示された3DシミュレータのURLをコピーする、もしくは「シミュレーション詳細」で開く詳細画面に表示されるQRコードを使用し、自社のウェブサイトなどにリンク先として設定します。
iFrameを使う
HTMLの機能、iFrameという埋め込み技術を使って自社のサイトに埋め込むことが出来ます。
例えば掲載したいウェブページのHTMLコード内に以下の様な記述
<iframe width=”720″ height=”400″ src=”https://3d-simulator.com/?uid=interia-ui-e&n=4&s=034028026030016110″ scrolling=”no” frameborder=”0″>
この様な記述を行う事でウェブサイトに埋め込みが可能です。
ー
表示だけで終わらない。Webから3Dデータを再活用する「エクスポート機能」
だれでもシミュレータは、CADデータをWeb表示するだけでなく、Web上で行ったカスタマイズ内容を保持したまま、別の形式で書き出すことが可能です。
単にWebサイトに埋め込むだけでなく、DSIMに取り込んだデータは、用途に合わせて最適な形式で書き出すことができます。これにより、設計・営業・マーケティングがひとつのデータで繋がります。
【高画質レンダリング】他ソフトへの橋渡し
DSIMで整えたマテリアル情報を活かしたままデータを書き出し、KeyShotやBlenderなどのレンダリングソフトで活用するといった、制作のハブとしても機能します。
【AR対応】USDZ・GLB形式への変換で、スマホARを即座に実現
CADデータをアップロードするだけで、iPhoneやAndroidの標準機能で動くARデータへ自動変換。カタログから「部屋に試し置きする」といった体験を、アプリ開発なしで提供できます。
【設計フィードバック】Web上のシミュレーション結果をCADへ戻す
ブラウザ上で色やパーツを変更した結果を、OBJやGLTFとして書き出し可能。顧客の要望を反映したデータをそのままRhinocerosやSketchUpへ差し戻すことができ、設計の二度手間をなくします。
ー
あわせて読みたい：[3Dデータの書き出し・AR活用の詳細はこちら]
ー
3D CADデータを、Webと現場を繋ぐ「強力な武器」に変えませんか？
「だれでもシミュレータ（DSIM）」は、単なるWebビューワーではありません。CADデータのWeb表示・埋め込みはもちろん、AR活用やシミュレーション結果のエクスポートまで、3Dデータの可能性を最大限に引き出します。
まずは無料アカウントで、お手持ちのCADデータ（OBJ等）がどのようにWebやARで動くのか、その驚きの簡単さを体験してください。
[ 専門スタッフにオンライン相談する（無料・30分） ]
「データの軽量化」や「既存CADとの連携方法」など、技術的なご質問に直接お答えします。
ランキング
-
「競合に提案内容を知られたくない」。特定の顧客だけに3Dシミュレーターを限定公開して、商談の成約率を高める方法
-
難しい操作は一切なし。手持ちの「間取り図画像」を3D化して、誰でも1分で家具配置ができるシミュレーター
-
Amazon・楽天・Yahoo!ショッピングの売上UP。シミュレーターから直接カートへ誘導する「相互リンク」の仕組み
-
家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：アイテム追加編
-
家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：表示切り替え編
-
Shopify×3Dシミュレーターでカスタマイズ商品を販売する仕組み｜Draft Order API連携
-
スマホで3Dデータを作るならどれ？おすすめ3Dスキャンアプリ比較【初心者向け】
-
PoCで終わらせないシステム開発｜シミュレータ開発元によるカスタマイズと本開発への移行
-
3Dソフト不要！CADのOBJデータをそのままアップロードして3Dシミュレータを作る最短ルート
-
受注ミスの『責任』をシステムが肩代わり。「3Dコンフィギュレーター」の禁則処理とは？
