おすすめの使い方：3DCAD（Rhinoceros/SketchUp等）をWebで使う方法｜Blenderを使って3Dシミュレータにする

2023.08.20

【3D CAD活用ガイド】
Rhinoceros / SketchUp / Solidworks 対応。
「自社サイトへの3D埋め込み」を、開発費ゼロ・ノーコードで実現する方法。

「3DモデルをWebで見せたいけれど、どうやってWeb用のデータにすればいいかわからない」「3Dデータを活用したいが、開発コストはできるだけ抑えたい」という方のための実践ガイドです。

Rhinoceros（ライノセラス）やSketchUpなどで作った3D CADモデルを、自社サイトのブラウザ上で表示したり、自由に動かしたりできるようにしたいと考えたことはありませんか？

3D CADで作ったデータは、そのままWebブラウザで扱えるとは限りません。Web上で3Dモデルを表示・操作するには、データの形式や容量、マテリアル、テクスチャなどを確認し、Webで扱いやすい状態に整える必要があります。

そこで活用できるのが、3DCGソフトの「Blender」です。

Blenderは無料で利用できる3DCGソフトで、3D CADから取り込んだモデルの確認や編集、マテリアルの設定、Web用データへの書き出しなどに利用できます。

そして、Blenderで準備した3Dデータを「だれでもシミュレータ」に登録することで、Webブラウザ上で表示・操作できる3Dシミュレータとして活用できます。

本記事では、RhinocerosやSketchUpなどの3D CADデータを、Blenderを使ってWebで利用できる3Dデータに整え、「だれでもシミュレータ」でWeb表示・サイト埋め込みするまでの具体的な流れを紹介します。

RhinocerosやSketchUpなどの3D CADデータをWebで活用

対応ソフト例（Rhinoceros, SketchUp, Solidworks, Fusion360など）

「だれでもシミュレータ」は、さまざまな3Dソフトで作成した3Dデータを活用できます。
3D CADで作成したデータをBlenderに取り込み、形状やマテリアルなどを確認・調整したうえで、Webで扱いやすい形式に書き出します。

そのデータを「だれでもシミュレータ」に登録することで、Webブラウザ上で3Dモデルを表示・操作できるようになります。

対応ソフトの例として、次のようなものがあります。

建築・インテリア: Rhinoceros（ライノセラス）、SketchUp（スケッチアップ）、Vectorworks
機械・プロダクト設計: Solidworks（ソリッドワークス）、Autodesk Fusion 360、Inventor
汎用3D・CG: AutoCAD（3D機能）、Blender

使用する3D CADやデータの内容によって必要な調整は異なりますが、既存の3Dデータを活用してWeb上で3Dモデルを見せることができます。

特にBlenderを使えば、3D CADから取り込んだモデルの構成を確認したり、不要なデータを整理したり、マテリアルやテクスチャを調整したりすることができます。

つまり、

3D CADで作る → BlenderでWeb用に整える → だれでもシミュレータでWeb化する

という流れです。

Web表示に利用できる3Dデータ形式

3D CADのデータをWebで利用する場合、どの形式で書き出すかも重要になります。
3D CADには、それぞれのソフト独自のデータ形式がありますが、Webブラウザで3Dモデルを表示する場合は、Webで扱いやすい形式に変換する必要があります。

Blenderでは、用途に応じてOBJ、FBX、glTF / GLBなど、さまざまな3Dデータ形式を扱うことができます。
中でも、Web上で利用する3Dデータとして注目されているのが「glTF / GLB」です。

Webでの利用を想定した3D形式
glTFは、Webやリアルタイム3Dでの利用を想定した3Dデータ形式です。モデルだけでなく、マテリアルやテクスチャなどの情報も扱うことができます。
GLBなら関連データをまとめられる
GLBはglTFをバイナリ形式でまとめたファイル形式です。3Dモデルやマテリアル、テクスチャなどをひとつのファイルにまとめて扱えるため、Web用データとして管理しやすいというメリットがあります。
Webで動かすためにはデータの最適化も重要
3D CADの元データがそのままWebに適しているとは限りません。ポリゴン数やテクスチャサイズ、オブジェクト構成などを確認し、ブラウザ上でスムーズに表示・操作できるように調整することが重要です。

このように、3D CADで作ったモデルをそのままWebへ持っていくのではなく、Blenderを使ってWeb用の3Dデータとして整えることで、3Dシミュレータに活用しやすくなります。

【3ステップ】CADデータをWebサイトに埋め込む具体的な手順

1.だれでもシミュレータの管理画面で3DCADデータを登録

3D CADからBlenderに取り込んだ3Dモデルを、Webで利用しやすい状態に整え、対応する形式で書き出します。
準備した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コード内に以下の様な記述

この様な記述を行う事でウェブサイトに埋め込みが可能です。

ー

表示だけで終わらない。Webから3Dデータを再活用する「エクスポート機能」

だれでもシミュレータでは、3DデータをWebサイトに表示するだけでなく、用途に応じて3Dデータを書き出すこともできます。

Blenderで準備した3Dデータをだれでもシミュレータに登録し、Web上で製品の色やパーツなどを変更した場合も、そのデータを別の用途で活用することができます。

Webでの製品紹介やシミュレーションだけでなく、ARやプレゼンテーションなど、3Dデータをさまざまな場面で活用できます。

3Dデータを一度Web用に準備することで、Webサイトで「見せる」「操作する」だけでなく、その先のさまざまな3D活用へつなげることができます。

【高画質レンダリング】他ソフトへの橋渡し

DSIMで整えたマテリアル情報を活かしたままデータを書き出し、KeyShotやBlenderなどのレンダリングソフトで活用するといった、制作のハブとしても機能します。

【AR対応】USDZ・GLB形式への変換で、スマホARを即座に実現

CADデータをアップロードするだけで、iPhoneやAndroidの標準機能で動くARデータへ自動変換。カタログから「部屋に試し置きする」といった体験を、アプリ開発なしで提供できます。

【設計フィードバック】Web上のシミュレーション結果をCADへ戻す

ブラウザ上で色やパーツを変更した結果を、OBJやGLTFとして書き出し可能。顧客の要望を反映したデータをそのままRhinocerosやSketchUpへ差し戻すことができ、設計の二度手間をなくします。

ー

あわせて読みたい：[3Dデータの書き出し・AR活用の詳細はこちら]

ー

3D CADデータを、Webと現場を繋ぐ「強力な武器」に変えませんか？

「だれでもシミュレータ」は、単なるWebビューワーではありません。3DデータのWeb表示・埋め込みはもちろん、ARでの活用や、シミュレーション結果のエクスポートなど、Webで活用した3Dデータをさまざまな用途につなげることができます。

まずは無料アカウントで、お手持ちの3DデータがどのようにWeb上で動くのか、実際にその使いやすさを体験してください。

[ 専門スタッフにオンライン相談する（無料・30分） ]
「データの軽量化」や「既存CADとの連携方法」など、技術的なご質問に直接お答えします。

ランキング

機能アップデート

シミュレーターの作り方

おすすめの使い方

だれでもシミュレータ：コラム記事

おすすめの使い方：3DCAD（Rhinoceros/SketchUp等）をWebで使う方法｜Blenderを使って3Dシミュレータにする

【3D CAD活用ガイド】
Rhinoceros / SketchUp / Solidworks 対応。
「自社サイトへの3D埋め込み」を、開発費ゼロ・ノーコードで実現する方法。

RhinocerosやSketchUpなどの3D CADデータをWebで活用

対応ソフト例（Rhinoceros, SketchUp, Solidworks, Fusion360など）

Web表示に利用できる3Dデータ形式