3D CADモデルを自社サイトに載せる方法：4通りを比較

3D CADモデルを自社サイトに載せるには、アセンブリをSTEPファイルとして書き出し、glTFまたはGLB形式の軽量な表示用モデルに変換して、そのモデルを製品ページのWebビューアーで表示します。CADファイルそのものを公開する必要はありません。ブラウザーがダウンロードするのは表示用モデルだけです。Tutamenの液冷用マニホールドICM-21（部品42点）の場合、STEPファイルから作成した表示用モデルのダウンロードサイズは2.0MBです。

STEPは、主要なCADシステムならどれでも書き出せる中立的な3Dファイル形式です（⁠ISO 10303）。glTFはKhronos Groupが策定したWeb上の3D向けのオープンな形式で、GLBはglTFを1つのファイルにまとめたものです。STEPからglTFへの4つの方法は、主に購入者ができること、手元から渡すデータ、誰が動作を維持するかで異なります。

ウェブサイトでSTEPファイルをそのまま表示できないのはなぜですか？

STEPファイルは製品を厳密な数式の曲面で表しますが、ブラウザーが描けるのは平らな三角形だけだからです。まず、すべての面を小さな三角形（「メッシュ」と呼ばれるポリゴン）で覆う必要があり、この工程をテッセレーションと呼びます。三角形が多いほど曲面はなめらかになり、ファイルも大きくなるので、優れた変換ツールは全画面で曲面がなめらかに見えるところで止めます。

ページで何ができるかも、変換で決まります。優れた表示用モデルは、部品を1つずつ分けて名前と材質を付けているので、アセンブリを分解したり、部品ごとにクリックしたりできます。繰り返し使われる部品は1回だけ保存します。ICM-21のファイルに含まれる三角形は214,168個で、画面に描かれるのは654,948個です。フィーチャーツリー、スケッチ、パラメーターは含まないため、質量や体積などの数値は先に厳密なCADから測っておきます。優れたページでは、両者が異なる場合はデータシートが優先されると明記しています。

Proofsceneが公開している4つのモデルについて、この工程で作られたデータを、各ページが読み込むファイルから実測しました。

訪問者が読み込みを待つのは、このダウンロードサイズ分のデータです。ページとビューアーで、さらに約0.5MBが加わります。*STRAVIK、HALVORN、ARTIXOは、ほかの業界の例を示すためにProofsceneが社内でモデリングした架空のブランドです。ICM-21はTutamenの実在の製品で、そのSTEPファイルから作りました。

CADモデルを自社サイトに載せる4つの方法とは？

4つの方法とは、無料オンラインビューアーの埋め込み、ホスティング型の3Dプラットフォームやコンフィギュレーター、Googleのmodel-viewerのようなオープンなWebコンポーネントで自作するページ、そしてCADから制作してもらうインタラクティブな製品ページです。工業製品で決め手になる点ごとに比べると、次のようになります。

自社製品に合う方法は？

無料ビューアーは、1人のお客様に1つの部品を手早く見せる用途に向いています。いちばん早い方法である一方、渡すものもいちばん多くなります。無料のCADビューアーは、STEPファイルそのものを扱うからです。

ホスティング型のプラットフォームは、購入者が色やサイズを選ぶような、見た目とオプションで売る製品に向いています。購入者はコンフィギュレーターで選びます。

model-viewerでの自作は、時間のあるWebチームと、回して見せるだけで済むシンプルな部品に向いています。model-viewerは、three.jsライブラリーをもとにしたGoogleの無料Webコンポーネントで、回転、ラベル、ARをうまく扱えます。その代わり、製品ごとに変換、軽量化、ライティング、テストが必要で、変更のたびにやり直しになります。断面表示、X線モード、クリックできる部品リストは、自分でコードを書くことになります。

制作を依頼するインタラクティブな製品ページは、価値がケースの内側にある工業製品（ポンプ、バルブ、マニホールド、ロボット関節）と、すべての数値を確かめる購入者に向いています。Proofsceneが、フレームタグ1つで自社サイトに組み込むか、yourbrand.proofscene.comのホスティングページとして制作します。TutamenのICM-21は、STEPファイルが届いたその日に公開されました。

自社製品が最後のグループに当てはまるなら、STEPファイルとデータシートを送って自社製品を3Dにしましょう。制作する製品ページは、ProofsceneのBusinessプランとEnterpriseプランに含まれます。作業を始める前に、何を制作し、いつ公開できるかを私たちからお伝えします。

購入者はモデルで何ができればよいですか？

工業製品の購入者は内部を見て数値を確かめたいので、モデルは回すだけでなく、製品を分解し、断面で見て、透かして見て、部品ごとのデータを読めるものにするべきです。どれも、今すぐ開ける公開中のモデルで動きます。

• 分解図。HALVORN BV25ボールバルブが、組み立て順に14個の部品に分かれます。
• カットモデルとフロー。STRAVIK SX 50-⁠160ポンプを半分に切り、15⁠～⁠40m³/hの範囲で運転できます。
• X線表示。ARTIXO RA90ロボット関節のハウジング越しに、モーター、50:1の波動歯車、出力軸受が見えます。
• 部品データと計測。Tutamen ICM-21の部品をクリックすると名前、材質、数量が表示され、実際のエッジ間を計測したり、データシートどおりの配分で冷却液を流したりできます。
• 共有。表示ごとにリンクとQRコードがあり、自分では操作しない訪問者向けに短いガイドツアーも用意しています。

同じモデルから、新製品発表の動画もレンダリングできます。3D製品アニメーションのほか、ブラウザー上でインタラクティブな3D製品ページを分解していく35秒の動画もご覧ください。

スマートフォンで3Dモデルを速く表示するには？

モデルは数MBに抑え、訪問者がその位置まで来たときに読み込み、モデルがなくてもページが読めるようにします。最初にモデルを読み込むと、購入者が目当てにしている文章や画像の表示が遅れます。

• ファイルを圧縮する。glTFは数値を少ないバイト数で保存でき、Draco拡張やmeshopt拡張でジオメトリを圧縮できます。サーバーからも圧縮して送りましょう。Proofsceneのモデルは面の向きを16ビットの数値で持ち、gzipで圧縮して転送されるため、ICM-21の3.6MBのGLBは2.0MBで届きます。
• 三角形は購入者が見る部分に使う。ねじ山の細部、小さなフィレット、誰も開けない部品の内部まで細かく再現しても、購入者には役立たず、スマートフォンの処理時間が増えるだけです。
• 最初は静止画を見せる。3Dは、スクロールして表示範囲に入ったときか、タップしたときに読み込みます。model-viewerなら、ポスター画像と遅延読み込みでこれができます。
• スクロールを妨げない。Proofsceneの埋め込みはページと一緒にスクロールし、ズームはCtrlキーかピンチ操作のときだけです。スマートフォンではパネルがシートに折りたたまれ、製品が隠れません。
• 情報はテキストに残す。検索エンジンやAIアシスタントが読むのはモデルではなくページなので、説明、部品名、仕様はHTMLに書きます。Proofsceneの公開デモページは3Dモデルの構造化データも加えていて、3Dを表示できないブラウザーにも、そのテキストは届きます。

モデルを公開ページに載せても、CADデータは安全ですか？

はい。表示用モデルはCADデータそのものではないからです。画面表示に十分な精度の三角形だけを持ち、フィーチャーツリー、スケッチ、パラメーター、厳密な曲面はなく、省いた内部の細部も含みません。公開前に、大切な情報を次の方法で守ります。

• 内部の流路やシールの形状など、商業上の機密にあたる部分は簡略化するか削除します。
• 訪問者が元のファイルをダウンロードできるビューアーには、STEPファイルをアップロードしないでください。
• 公開前はパスワード付きのリンクで確認し、CADを扱う相手とはNDAを結びます。Proofsceneもこの方法で進め、CADデータとコンテンツの所有権は自社に残ります。

関連記事

TutamenのICM-⁠21がSTEPファイルから公開中の製品ページになるまでを読むか、インタラクティブな3D製品デモのページで4つのモデルをすべて試すか、3D製品ビューアーを自社サイトに組み込む36秒の動画をご覧ください。