はじめに

HTMLパネルは、開発者が作ったWebページを、metatellのルームの3D空間にパネルとして表示する機能です。参加者はパネルの上で直接、ボタンを押したり、ページをスクロールしたり、入力欄へ文字を入力したりできます。

このガイドでは、HTMLパネルで表示するページの作り方を説明します。シーンへの配置は、シーンの制作者がSpokeのHTML Panel Elementで行います。

仕組み

HTMLパネルの描画には、@urth/three-html-panelを使います。

ルームは、シーンに指定されたURLのページを、画面に表示しない<iframe>で開きます。
ページは、agentと呼ぶ小さなスクリプトを読み込みます。agentはページの見た目をコピーしてルームへ送り、ルームはそれをパネルのテクスチャとして描きます。
参加者がパネルを操作すると、ルームはその操作をagentへ送ります。agentはページの中でDOMイベントとして再生します。

ページは通常のWebページとして動くので、React、Vue、Svelteなどのフレームワークや、ページ自身のスクリプトを利用できます。

agentを読み込むページだけを表示できます。 agentの読み込みは、ページがパネルとして表示されることへの同意を表します。agentを読み込めない外部のWebサイトは表示できません。外部のWebサイトをそのまま埋め込む場合は、Iframe Elementを利用します。
agentに指定したオリジンのルームでだけ表示されます。 agentには、ページを表示してよいルームのオリジンを指定します。
ページはsandboxの中で動きます。 ページはルームとは別の、不透明なオリジンで動きます。ルームのCookie、ストレージ、ページには触れられません。ページ自身もCookieやlocalStorageを利用できません。

パネルは、Spokeでシーンに配置したものだけが表示されます。参加者がルームへURLを貼り付けても表示されません。
パネルの表示と操作は、参加者ごとに独立しています。参加者ごとに別々にページを開くため、ある参加者の操作はほかの参加者のパネルに反映されません。参加者の間で状態を共有する場合は、ページのサーバーで状態を管理します。
マウス、タッチ、VRのコントローラーで操作できます。VRでは、パネルの入力欄に文字を入力できません。