マーターポート3Dモデルを埋め込む

マーターポート3Dモデルを埋め込む

最終更新日：2020年12月09日 07:13

マーターポート3Dモデルのリンクをいつでもシェアでき、リンクをカスタマイズできるだけでなく、

モデルを直接ウェブサイト内に埋め込むこともできます。

 

YouTubeと同じような仕方で、次のような形でマーターポートモデルはウェブページの真ん中に表示されます。

 


  

方法

1．モデルをPublicに設定します。

 

2．モデルを追加したいウェブページを識別します。

 

3．次のHTMLソースコードをウェブページに追加します。

〇<iframe width="853" height="480"

 src="https://my.matterport.com/show/?

m=xxxxxxxxxxx" frameborder="0" allowfullscreen

 allow="xr-spatial-tracking"></iframe>

 

〇的確な命令はウェブサイト独自のコードに応じて異なります。

 

4．src属性内のURLを置き換えます。

〇例：https://my.matterport.com/show/?m=xxxxxxxxxxx

(上で表示したもの)の代わりに、特定のマーターポートモデルへのURLを使用します。


〇さらに、付加的なURLパラメーターを追加することもできます。

 

5．埋め込む際に、「allowfullscreen」をiframeコードに含めます。


〇これにより、聴衆はモデルをフルスクリーンモードか、VRで見ることができます。


サードパーティーのCMC
（ワードプレス、Drupal、Wix、Zendesk、Medium）を使用する



サードパーティー製のコンテンツ管理システムを使ってウェブサイトを管理する場合、

そのページのHTMLソースコードを開き、次の説明にしたがって進めてみましょう。

 

1．CMSバックエンドにログインします。

 

2．編集したい投稿／ページ／記事を見つけます。

 

3．CMSビューを切り替えてソースコードを見つけます。

〇これは大半の場合、CMCの中で＜／＞をクリックすることで可能です。

下記を参照して下さい。

 


 

〇コードを検索して、＜iframe＞を貼り付ける場所をはっきりと見極めるには、基本的な

HTML知識が必要です。


〇特定のCMS(私たちはZendeskを使用)は、iframeが適切に作動する上で、

「Allow unsafe HTML」を選択することが必要な場合があります。

 

Wordpress CMC


Wordpress.comはiframeを許可しません。

つまり、マーターポート3DモデルをWordpress投稿に埋め込むことはできないということを意味します。
しかし、Wordpress CMCを使用するウェブサイトは、iframeを許可しています。
つまり、iframeコードをあらゆるページに直接貼り付けることができるというわけです。
そのために、次のWPプラグインを使用できます：

 

1． Embed.lyプラグイン

 

2．Embed.lyのマーターポートサポートプラグイン

 

3．iframe プラグイン

 

4．WP3Dモデル

 

Wix



次の指示にしたがって、マーターポートモデルをWixページに埋め込んでみましょう。

 

1．コードを埋め込むことを希望するWixページを開きます。

 

2．「Add」→「More」をクリックしてサイトに埋め込みます。

 

3．表示される灰色のボックスをドラッグして、ページ上に埋め込まれた物を再配置します。

 

4．「Enter Website Address」をクリックします。

 

5．URLをフィールド内に貼り付けます。3Dショーケースがボックス内に現れます。

 



Mediumブログ投稿



次の指示にしたがって、マーターポートモデルをMediumブログ投稿に埋め込んでみましょう。

 

1．コードを埋め込むことを希望するMediumページを開きます。


2．「＋」ボタンをクリックして、新しいセクションを追加します。


3．＜＞をクリックして、コードを埋め込みたいということを指定します。


4．3DモデルのURLを貼り付けます。

 


  

Placester


次の指示にしたがって、マーターポートモデルをPlacesterに埋め込んでみましょう。

 

1．コードを埋め込むことを希望するPlacesterのページを開きます。


2．「＜＞」というHTMLアイコンをクリックします。

 


 

3．iframe埋め込みコードを貼り付けます。

 

4．「＜＞」というHTMLアイコンをクリックして、ビジュアルエディターに戻ります。

〇こうしてiframeが直接埋め込まれたことが表示されます。

 

5．変更を保存して、埋め込まれた物がウェブサイト上で作動します。

 

このプロセスに関するさらなる情報は、Placesterのサポートページで見ることができます。


HTMLソースコードに直接アクセスする


もしCMCが変更を許可しない場合には、ウェブサイトのウェブ担当者に問い合わせをして、

アクセス許可を求めることができます。
ウェブサイトのHTMLを編集する権限がある場合には、
​HTMLソースコードに、直接＜iframe＞コードを追加してみましょう。



    • Related Articles

    • マーターポート3Ｄモデル用のティーザー動画

      最終更新日：2020年8月19日 04:02 ティーザーとは、マーターポートモデルの最高の部分を紹介する映像クリップのことです。    Emailを通じた販売キャンペーンや、FacebookやTwitterといったソーシャルメディアに投稿する上で 効果的な手段です。 ダウンロードとシェア  1．my.matterport.comに行き、マーターポートモデルを開きます。   2．Mediaタブの中にあるVideosをクリックします。   ...

    • マーターポートクラウド、ワークショップ、３Dショーケースとは？

      最終更新日：2020年11月21日 03:18 空間をスキャンした後に、３Dモデルを管理、編集および視聴する上で、 マーターポートは3つのツールを提供します。 マーターポートクラウド マーターポートクラウド（my.matteport.com）は、マーターポートによる３Dモデルをホストして 管理するためのウェブポータルです。 マーターポートクラウド上から、3Dモデルの名前の変更やフォルダー内での管理、 また詳細な統計値を取得したり、コラボレータを招待することに加え、 ...

    • マーターポート3DモデルをVimeoやYouTube上にアップロードできますか？

      申し訳ありません。 マーターポートモデルはインタラクティブな3D空間であり、固定された動画ではありません。 そのため、マーターポート3DモデルをVimeoやYouTubeに直接アップロードすることはできません。 しかし… 自分がマーターポートモデルを探索している映像を作成することはできます。 この映像フッテージを編集して、VimeoやYouTubeにアップロードすることは可能です。

    • 3Dモデルへログインして開く方法

      最終更新日：2020年1月25日 03:42 アップロードと処理 空間をスキャンした後に、マーターポートのキャプチャappから マーターポートクラウド上の自分のアカウントへ3Dモデルをアップロードしましょう。 ナレッジベース参照： モデルをアップロードする モデルは「Processing」メッセージと共にマーターポートクラウド上に現れます。 モデルの大きさで異なりますが、この処理には24～48時間かかります。 処理が完了した後にemailが送信されます。 マーターポートクラウドにログインする ...

    • VRと図式的フロアプラン(平面図)の順序を編集する（任意）

      最終更新日：2019年9月27日 06:22 バーチャルリアリティー   VRを使用して聴衆がマーターポート3Dを視聴することが前もって分かっているのであれば、 あらかじめ自分で試してみておいた方が賢明でしょう。   必要に応じて、VR内のスキャン画像を表示、また非表示にすることで、 より優れたユーザー体験をもたらすことができます。 図式的フロアプラン   さらにマーターポートは、処理されたマーターポート空間の図式的フロアプランの順序付けをする機能を提供します。   ...