Vectary WebARビューワーをWebflowに埋め込む方法

Vectaryウェブビューアを使用すると、YouTube動画を埋め込むのと同じくらい簡単に、Webflowのウェブサイトに3DやARを統合できます。Webflowは、デザイナーやエージェンシーがコード不要でウェブサイトを作成できる、素晴らしいオンラインツールです。Webflowのサイト上でVectary WebARビューアがどれほど魅力的に見えるか、実際にご確認されたい場合は、私たちの ホームページ.

WebARとは？

WebARとは、外部アプリをダウンロードすることなく、ウェブ上で拡張現実（AR）を体験できるテクノロジーです。VectaryのWebARビューアは、iPhoneとAndroidの両方でこの体験に対応しています。

Webflowサイトに3Dデザインを埋め込む方法

1. 3DモデルをVectary Studioにインポートするか、ゼロからモデルを作成します。
2. 3Dモデルを回転、パン、またはズームして、ビューを設定します。インタラクションやアニメーションを使用します。プレビューモードでは、WebARビューアでどのように表示されるかを確認できます。
3. 『Share』タブをクリックし、共有オプションを有効にします。
4. 埋め込みコードをコピーします。
5. Webflowのウェブエディタに移動します。“+” アイコンをクリックして、Embed（埋め込み）要素を追加します。これはComponents（コンポーネント）内にあります。Embed要素をコンテナにドラッグ＆ドロップします。
6. Vectary ViewerのコードをWebflow of コードエディタに貼り付けます。
7. サイトを公開すると、コードを貼り付けた場所にビューアがそのまま表示されます。

Webflow WebARビューアの例

このようにビューアを表示させることができます。

WebAR iframeコードのテスト

WebARコードを生成する時間がない場合は、こちらのiframeをお使いのウェブサイトでテストできます。<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" frameborder="0" width="100%" height="480"></iframe>

VectaryのWebARビューアは、様々なアニメーションや挙動（ビヘイビア）を設定してカスタマイズできます。また、ビューアAPIを使用して、インタラクティブなカスタムWebアプリを作成することも可能です。たとえば、1つのビューア内で、訪問者が様々なカラーや形状のバリエーションを自由に切り替えられるオンラインショップなどを構築できます。

Vectary WebARビューアに変更を加える方法

たとえば、3Dモデルの色、アングル（ビュー）、あるいは形状そのものを変更したいとします。Vectaryエディタは、ウェブビューア向けの即時反映可能な3D/AR CMSのように機能します。

1. Vectaryで3Dプロジェクトを開きます
2. 変更を加えます
3. 『Share』タブをクリックし、『Synchronize changes（変更を同期）』をクリックします。コードを差し替える必要はありません。埋め込まれているすべてのサイトで、3Dビューアが自動的に更新されます。

VectaryでビューアにARアイコンを追加する方法

1. Vectary Studioに移動します
2. Escキーを押してシーン設定に移動します
3. 『Advanced settings（詳細設定）』をクリックし、『Augmented Reality（拡張現実）』を選択します。アイコンとその配置位置を自由にカスタマイズできます。

ご注意：現時点では、AR内でのインタラクション機能はご利用いただけません。ただし、ARプレビューを使用すれば、訪問者が3Dビューアであらかじめ設定した製品バリエーションを実物サイズで表示（紹介）することができます。