3Dシミュレーターの作り方：3Dシミュレータの作り方｜チュートリアルで実際に作ってみる
2023.06.25
3Dデータを使って、Web上で動作する3Dシミュレータや3Dコンフィギュレータを作ってみませんか？
「だれでもシミュレータ」では、3Dメッシュデータとマテリアルデータを組み合わせて3Dオブジェクトを作り、それをステージに配置することで、Web上で3Dモデルを表示できます。
さらに複数の3Dオブジェクトを組み合わせて「ダイナミック3Dオブジェクト」にすることで、商品のパーツや仕様を切り替えられる3Dシミュレータを作ることができます。
サンプルデータを使って実際の作り方を試せるチュートリアルも用意していますので、まずは「どのように3Dシミュレータが作られているのか」を体験してみてください。
だれでもシミュレータで3Dシミュレータを作る基本
「だれでもシミュレータ」の基本的な考え方は、とてもシンプルです。
3Dメッシュデータとマテリアルデータを組み合わせて3Dオブジェクトを作り、それをステージに配置する。
これが3Dシミュレータを作る基本になります。
1．3Dメッシュデータを登録する
まず、3Dモデルの形状となる「3Dメッシュデータ」を用意します。
「だれでもシミュレータ」では、Blenderから書き出したOBJ形式の3Dデータを登録して使用できます。
Blenderでモデルの形状や構造を整え、Webで利用する3DデータとしてOBJを書き出します。
2．マテリアルデータを設定する
次に、3Dモデルの見た目を設定する「マテリアルデータ」を用意します。
マテリアルには、色や質感などの設定に加えて、テクスチャ画像を使用することもできます。
つまり、
3Dメッシュデータ＝商品の形状
マテリアルデータ＝商品の見た目・質感
という関係です。この2つを組み合わせることで、Web上に表示するための3Dオブジェクトを作ることができます。
3．3Dオブジェクトを作る
登録した3Dメッシュデータとマテリアルデータを組み合わせて、「3Dオブジェクト」として設定します。
3Dオブジェクトにすることで、3Dモデルをステージに登録してWeb上に表示できるようになります。
例えば、同じ形状のパーツでも、
「ホワイトのパーツ」
「ブラックのパーツ」
「木目のパーツ」
というように異なるマテリアルを組み合わせれば、それぞれを別の3Dオブジェクトとして登録できます。
4．ステージに配置する
作成した3Dオブジェクトをステージに配置します。
ここまでで、Web上に3Dモデルを表示することができます。
ただし、商品シミュレーターとして使う場合には、ここからさらに「選べる仕組み」を作ることができます。
パーツを切り替える「ダイナミック3Dオブジェクト」
3Dシミュレータで重要になるのが「ダイナミック3Dオブジェクト」です。
これは、複数の3Dオブジェクトを組み合わせ、ユーザーが選択した内容に応じて表示する3Dオブジェクトを切り替えられるようにしたものです。
例えば家具のシミュレーターなら、
天板：ホワイト／ブラック／木目
脚：ブラック／シルバー
取っ手：Aタイプ／Bタイプ
といった選択肢を用意できます。
ユーザーが選択すると、それに応じてステージ上の3Dオブジェクトが切り替わります。
これによって、単に3Dモデルを見るだけではなく、商品の仕様を選びながら完成イメージを確認できる3Dコンフィギュレータやデザインシミュレーターとして利用できるようになります。
価格を設定すれば見積もりシミュレーターにも
さらに、「ダイナミック3Dオブジェクト」に登録するそれぞれの3Dオブジェクトに価格を設定することもできます。
例えば、
ホワイト天板 ＋10,000円
ブラック天板 ＋15,000円
高級脚 ＋20,000円
というように各パーツに価格を設定しておけば、ユーザーが選択した内容に応じて価格を計算できます。つまり、
3Dメッシュデータ ＋ マテリアルデータ = 3Dオブジェクト
↓
ダイナミック3Dオブジェクト
↓
ステージ上でパーツを切り替える
↓
選択内容に応じて価格を計算する
という仕組みで、3D表示だけでなく、商品選択から見積もりまでつながる3Dシミュレーターを構築できます。
実際の作り方をチュートリアルで試す
ここまでの説明だけでは、実際にどのような設定をするのかイメージしにくいかもしれません。
そこで「だれでもシミュレータ」では、サンプルの3Dデータを使って、実際に3Dシミュレータを作る手順を確認できるチュートリアルをご用意しています。
チュートリアルで使用するサンプルデータはBlenderで制作しています。
まずはサンプルデータを使って、3Dメッシュデータやマテリアルを登録し、3Dオブジェクトを作成するところから試してみてください。
3Dシミュレータの作り方をチュートリアルで試す
3DデータはBlenderで準備
「だれでもシミュレータ」で利用する3Dデータは、Blenderで準備することを基本としています。
これは特定の3Dソフトが最も優れているからということではなく、3Dデータの制作環境を統一することで、モデルの構造やマテリアル、テクスチャなどの違いによるデータのばらつきを抑え、Webシミュレーターで安定して利用しやすくするためです。
Blenderで3Dモデルを制作・調整し、OBJ形式で3Dメッシュデータを書き出します。
そのデータを「だれでもシミュレータ」に登録し、マテリアルやテクスチャを設定することで、Web上で利用できる3Dオブジェクトを作成できます。
詳しい設定方法は公式マニュアルへ
実際の操作方法や各機能の詳しい設定については、「だれでもシミュレータ」の公式マニュアルページをご覧ください。
チュートリアルで全体の作り方を体験し、詳しい設定が必要になったらマニュアルで確認する、という使い方がおすすめです。
また、3Dメッシュデータやマテリアルの準備方法については、動画でもご紹介しています。
マテリアルの作り方
実際に3Dシミュレータを作ってみる
3Dシミュレータは、特別なシステム開発だけで作るものではありません。
まずは3Dデータを準備し、3Dメッシュデータとマテリアルデータを組み合わせて3Dオブジェクトを作る。そこからダイナミック3Dオブジェクトを設定していけば、商品のパーツを選択できるシミュレーターへ発展させることができます。
まずはサンプルデータを使って、「だれでもシミュレータ」で実際の作り方を体験してみてください。
無料登録でお試しいただけます。カード番号などの入力は必要ありません。
無料で「だれでもシミュレータ」を試してみる
ランキング
-
「競合に提案内容を知られたくない」。特定の顧客だけに3Dシミュレーターを限定公開して、商談の成約率を高める方法
-
難しい操作は一切なし。手持ちの「間取り図画像」を3D化して、誰でも1分で家具配置ができるシミュレーター
-
Amazon・楽天・Yahoo!ショッピングの売上UP。シミュレーターから直接カートへ誘導する「相互リンク」の仕組み
-
家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：アイテム追加編
-
家具の3Dオブジェクトの配置・追加・削除をもっとスムーズにする新機能を追加：表示切り替え編
-
Blenderで3Dシミュレータを作る｜その③ マテリアルの準備
-
Blenderで3Dシミュレータを作る｜その② モデリング用オブジェクト
-
Blenderで3Dシミュレータを作る｜その① Blenderってなに？
-
3Dシミュレーターの費用は何で決まる？｜開発費を考えるときに知っておきたいこと
-
Shopify×3Dシミュレーターでカスタマイズ商品を販売する仕組み｜Draft Order API連携
