3Dウェブ埋め込みの完全ガイドと活用方法

Vectaryの最大の特徴の一つが、ウェブへのAR埋め込み機能です。ここでは、3D WebARの埋め込みとは何か、するとビジネス目標を達成するためにどのように活用できるかを詳しく解説します。

プログラミング言語をまったく知らない方にとって、「ウェブ埋め込み」は馴染みのない言葉かもしれませんが、それも今ここで変わります。ウェブ埋め込み（または埋め込みファイル）とは、HTMLコードやスクリプトを貼り付けるだけで、ウェブサイトに簡単に挿入できるあらゆるメディアを指します。

ブログ記事をより魅力的にしたい、ウェブサイトにインタラクティブな要素を追加したい、顧客に製品をARで体験してもらいたい、あるいは人気のあるSNSのデザイン要素を使って記事の一部を強調したいなど、どのような目的であっても、ウェブサイトとそこを訪れる顧客に大きな価値をもたらします。

最近では、インターネットユーザーは毎日のようにウェブ埋め込みを目にしています。これらはSNSの投稿、ニュースやメディアのサイトなど、さまざまな場所で使われています。最もよく知られている埋め込みの例は、おそらくYouTubeでしょう。ブログ記事に動画を掲載したい場合、YouTube動画の下にあるコードをコピーして貼り付けるだけで完了することがほとんどです。3Dプロジェクトも、現在この方向へと進んでいます。

3DおよびARウェブ埋め込みの例

以下の画像は、インタラクティブなVectaryの3Dビューアーです。3Dウェブ要素とAR体験の両方をサポートしているため、「WebAR」と呼ばれています。ドラッグして回転させたり、ARアイコンをクリックして拡張現実（AR）で体験したりしてみてください：

VectaryでWebAR埋め込みを準備する方法

ステップ1：3Dオブジェクトまたは3Dシーンの作成

ブログやウェブサイトにオブジェクトを埋め込むには、まずそのオブジェクトをどこに表示させたいかを検討する必要があります。それに基づいて、ウェブサイトのレイアウトに自然に馴染むように埋め込みの準備を行います。ウェブフレンドリーな3Dプロジェクトを作成する方法はいくつかあります。

独自の3Dモデルをインポートする

すでに3Dモデリングの経験がある場合は、3Dウェブ埋め込みを開始するためのモデルやファイルをいくつかお持ちでしょう。それらをVectaryにインポートし、読み込みが完了するまで待つだけです。現在、.obj、.dae、.stl、.gltf、.glb、.jpg、.png、.svgを含む60以上のファイル形式に対応しています。対応している全フォーマットのリストは、 こちら.

ライブラリを使用して、3Dリポジトリや作成済みのコレクションにアクセスする

3Dモデリングの初心者向けに、アセット、マテリアル、環境（ライティング設定など）を揃えた、厳選されたコレクションを用意しています。使いたいものが見つかったら、シーンにドラッグ＆ドロップして、埋め込みコードの生成に進みましょう。

プロジェクトをゼロから作成する

上級ユーザー向けに、Vectaryはエディットモードでの直感的なメッシュモデリング機能を提供しています。プロジェクトをインポートするだけでなく、ゼロから作成することも、インポートした既存のモデルやライブラリからシーンに配置したオブジェクトを編集することも可能です。3Dモデリングが完了したら、埋め込みコードの生成に進みましょう。

ステップ2：3Dウェブ埋め込みコードの生成方法

プロジェクトと3Dオブジェクトの準備が整えば、WebAR埋め込みコードの作成は非常に簡単です。「Share」ボタンをクリックして「Share to web」をオンにするだけで、必要な作業はすべてシステムが処理します。完了するとiframeコードが生成され、HTMLコードに貼り付けてすぐに使用できるようになります。

Vectary 3Dウェブ埋め込みの設定

詳細メニューから、埋め込みの仕上がりをカスタマイズできます：

テクスチャ品質

埋め込み表示に影響を与える最も重要なパラメータは、テクスチャ品質です。高精細なテクスチャは非常に詳細であるため、生成に時間がかかります。また、ウェブサイトに実装した際の動作パフォーマンスが低下する場合もあります。一方、低解像度のテクスチャは読み込みが速くなります。マテリアルに使用する各テクスチャの品質は、個別に下げることも可能です。

拡張現実

Vectary StudioのプロジェクトプロパティパネルにあるAdvancedメニューから拡張現実を追加します。異なるプラットフォーム（Android、iOS）に必要なファイルは、 自動的に生成されます （バックグラウンド）。

カメラビューを中央に合わせる

メインオブジェクトに カメラを中央に合わせる には、まずカメラに入っている（カメラ名の横に「+」アイコンが表示されている）ことを確認してください。次に、オブジェクト（またはオブジェクトグループ）をクリックし、下部ツールバーにある「フィットビュー」アイコンをクリックします（ショートカットキー「a」）。これにより、カメラのピボットポイントが選択したオブジェクトに合わせられます（何も選択されていない場合は、シーンの中央にカメラが合わせられます）。スクロールでズームイン/アウト、パン、回転を行って、ビューを調整します。

制限付きカメラビュー

ツールバーからシーンにカメラを追加します。プロジェクト内には複数のカメラを設置できるため、共有プロジェクトで実際にカメラ設定を使用するには、カメラに「入る」必要があります。カメラを選択し、右側のプロパティパネルで設定を変更します。「View Limits」のトグルをオンにすることで、 視野角を制限し、パンやズームの操作を制限できます。「Preview」をクリックして、新しい設定を試してみましょう。設定するには、 カメラを中央に合わせる には、まずカメラに入っている（カメラ名の横に「+」アイコンが表示されている）ことを確認してください。次に、オブジェクト（またはオブジェクトグループ）をクリックし、下部ツールバーにある「フィットビュー」アイコンをクリックします（ショートカットキー「a」）。これにより、カメラのピボットポイントが選択したオブジェクトに合わせられます（何も選択されていない場合は、シーンの中央にカメラが合わせられます）。スクロールでズームイン/アウト、パン、回転を行って、ビューを調整します。

エフェクト（ウェブのみ）

Ground plane（地面）をオンにしている場合や、影を落とすライトを設置している場合は、エフェクトリストから「Soft Shadows」を追加することをおすすめします。3Dオブジェクトに影や奥行きを与える同様のエフェクトとして「Ambient Occlusion」があり、これは「Reflections」と同様にリアルタイムで計算されます。

ステップ3：WebAR埋め込みのプレビュー

埋め込みを行う前にWebARビューアーをプレビューしたい場合や、同僚やクライアントとARプレビューを共有したい場合があります。「Share」に移動して「Share to web」をクリックし、ダイレクトリンクをコピーして新しいタブで開いてください。

ステップ4：ウェブ埋め込みコードをウェブサイトに配置する

「Share」セクションからウェブ埋め込みコードをコピーしてサイトに貼り付けるだけです。仕組みはYouTubeの埋め込みコードと同じです。また、次のサービスにファイルを埋め込むこともできます： Squarespace, Wix, Shopify, やWeebly、および同様のプラットフォーム。

3Dウェブ埋め込みコードの編集方法

HTMLコードに慣れているユーザーは、生成されたiframeコードを編集できます。現時点では、幅（width）、高さ（height）、境界線（border frame）などの基本的なパラメータのみ変更可能です。将来的には、コーディングのスキルがなくても、埋め込みコードでより多くのカスタマイズや編集オプションが利用できるようになります。例えば、ウェブサイトにきれいに収まるように埋め込みサイズを縮小したい場合は、必要に応じて「width」と「height」の属性を変更してください。オブジェクトを背景に美しく馴染ませるために、 framerborder の値を「0」にしておくことをお勧めします。

ステップ 4：ウェブサイトで3Dビューワーを編集する方法

ウェブサイトに埋め込まれたオブジェクトは、Vectaryエディターで作成された3Dデザインの成果物です。しかし、Vectaryはさらに一歩進んで、すでに埋め込まれているWebARプロジェクトを編集し、リアルタイムに変更することができます。Vectaryでプロジェクトを開いて変更を加え、「Share to web」設定の横で更新してください。すべての変更が即座に反映されます。

FAQ

Vectaryの3Dウェブ埋め込みの利用料金はいくらですか？

WebARのテスト機能は、閲覧数に制限のあるPROプランの一部となりました。詳細については、こちらの 料金プラン をご確認ください。