3D見積もりシミュレーターの作り方：組み合わせは無限大。ダイナミック機能で実現する、多数バリエーション対応WebARの作り方

2024.08.15

「色違いや形状違いの商品をすべてAR化するのは手間がかかる」と思っていませんか？

だれでもシミュレータの「ダイナミック3Dオブジェクト」と「ダイナミックマテリアル」機能を使えば、膨大なバリエーションも効率的にAR化できます。

本記事では、ユーザーがブラウザ上で選んだ「自分だけの組み合わせ」を、瞬時にiOS・Android対応のWebARとして表示させる設定手順を具体的に解説します。

ー

多数のバリエーションに対応したWebARが作れる理由

理由①
3Dデータを瞬時にWEB変換しパーツ化。そのパーツそれぞれを自由に組み合わせられる
理由②
Web変換した3DをiOS用、Android用それぞれに自動でWebARに変換するシステムだから

ー

だれでもシミュレータを使ったWebARの作り方

ステップ1：3Dデータの準備

RhinocerosやSketchUpから書き出したOBJファイルを活用します。
この際、パーツごとに分割して書き出すことで、後の『ダイナミック3Dオブジェクト』の設定がスムーズになります。

作り方の基本
3DCGやCADソフトから「obj」形式の3D形状データを出力します。この時、形状やカラーなどのバリエーションがある場合はそのバリエーションの数だけ、objデータを用意します。

形状にバリエーションがある場合
objデータをバリエーションの数だけ用意し「3Dメッシュデータ」として登録します。

色・素材にバリエーションがある場合
マテリアルをバリエーションの数だけ「マテリアルデータ」として登録します。

3Dオブジェクトとして登録
「3Dメッシュデータ」と「マテリアルデータ」を組み合わせ、ウェブで表示できる「3Dオブジェクト」として登録します。
この時、形状が違っても素材・色は同じ、というケースなら、異なる「3Dメッシュデータ」に同じ「マテリアルデータ」を何度でも組み合わせられます。つまり一つの「マテリアルデータ」を複数の「3Dオブジェクト」に使い回しができるのです。
逆に、形状が同じで「色・素材にバリエーション」にバリエーションがある場合は、同一の「3Dメッシュデータ」を使い回せます。

ステップ2：だれでもシミュレータで設定

だれでもシミュレータ：シミュレータ画面でバリエーション選択 — シミュレータ上でのバリエーション表示

形状違いの場合
「ダイナミック3Dオブジェクト」を使うことで、1つのシミュレーター内で形状を切り替えてAR表示できます。

色・素材違いの場合
「ダイナミックマテリアル」を使うことで、3Dモデルを増やすことなく、テクスチャの切り替えだけで無限のバリエーションに対応できます。

ステージに「ダイナミック3Dオブジェクト」「ダイナミックマテリアル」を登録
「ダイナミック3Dオブジェクト」「ダイナミックマテリアル」の登録が済んだら、最後にステージ設定を行います。
ステージ設定で「ダイナミック3Dオブジェクト」「ダイナミックマテリアル」（ダイナミックマテリアルの場合は組み合わせた「3Dオブジェクト」も一緒に）を登録する事で、使用可能になります。

ステップ3：WebARを表示・シェアする

保存したURLをクライアントに送れば、相手のスマホでも、選んだ仕様のままAR表示が可能です。非対面営業での強力なプレゼンツールになります。

WebARの表示方法
ステージ設定で構築されたシミュレータ画面を「公開URL」で開きます。
シミュレータ画面が開くので、あとは自由に組み合わせを選択。組み合わせができたら、画面内の「AR」ボタンをクリック（またはタップ）するだけ。それだけでWebARに変換されて表示されます。WebARはiOS・Androidどちらでも表示可能です。

WebARのシェア・配布方法
だれでもシミュレータにはシミュレーション結果を「お気に入り」として保存する機能と、そのシミュレーション結果を「コード」でシェアする機能があります。
シミュレータ画面で組み合わせができたら、その組み合わせを画面内の「♡」マークでお気に入り保存。お気に入り一覧で保存したお気に入りが確認できるので、そこからURLをコピペすれば、組み合わせ内容をそのままシェアできます。

ー

「そもそも、CADデータをWebサイトに埋め込む基本手順から知りたい」という方はこちらをご覧ください。

関連記事： [3DCADをWebサイトへ埋め込み・活用するための完全ガイド]