Webview
3D 空間内に埋め込み HTML インターフェースを作成・制御します。WebView は自由に浮遊させることも、VRM キャラクターにリンクしてキャラクターの移動に追従させることもできます。
React UI を Vite と @hmcs/ui で構築する方法については、WebView UI セットアップを参照してください。
import { Webview, webviewSource } from "@hmcs/sdk";
スタティックメソッド
| メソッド | 説明 |
|---|---|
Webview.open(options) | 新しい WebView を作成し、Webview インスタンスを返す |
Webview.list() | 開いているすべての WebView を取得する |
Webview.current() | WebView コンテキスト内で実行中の現在の WebView を取得する |
インスタンスメソッド
| メソッド | 説明 |
|---|---|
close() | WebView を閉じる |
isClosed() | WebView が閉じられたかどうかを確認する |
info() | WebView の情報を取得する |
patch(options) | 複数のプロパティを一度に更新する |
setOffset(offset) | 位置オフセットを設定する |
setSize(size) | 3D ワールド空間の寸法を設定する |
setViewportSize(size) | HTML ピクセル寸法を設定する |
navigate(source) | 新しいソースにナビゲートする |
reload() | 現在のコンテンツをリロードする |
navigateBack() | 履歴を戻る |
navigateForward() | 履歴を進む |
linkedVrm() | この WebView にリンクされた VRM を取得する |
setLinkedVrm(vrm) | WebView を VRM キャラクターにリンクする |
unlinkVrm() | VRM リンクを解除する |
ヘルパー
| 関数 | 説明 |
|---|---|
webviewSource.local(id) | ローカルアセットソースを作成する |
webviewSource.url(url) | URL ソースを作成する |
webviewSource.html(content) | インライン HTML ソースを作成する |
型ガード
| 関数 | 説明 |
|---|---|
isWebviewSourceLocal(source) | WebviewSource がローカルソースかどうかを確認する |
isWebviewSourceUrl(source) | WebviewSource が URL ソースかどうかを確認する |
isWebviewSourceHtml(source) | WebviewSource がインライン HTML ソースかどうかを確認する |
isWebviewSourceInfoLocal(source) | WebviewSourceInfo がローカルソースかどうかを確認する |
isWebviewSourceInfoUrl(source) | WebviewSourceInfo が URL ソースかどうかを確認する |
isWebviewSourceInfoHtml(source) | WebviewSourceInfo がインライン HTML ソースかどうかを確認する |
次のステップ
- シグナル -- スクリプトと WebView 間のクロスプロセス Pub/Sub メッセージング