本文へスキップ

ローディング画面 インフィニット・スピナー

問題

WebARエクスペリエンスにアクセスすると、「無限スピナー」が表示され、ページがローディング画面から動かなくなります。

ローディング・インフィニット・スピナー

なぜこのようなことが起こるのか?

XRExtras loading モジュール(デフォルトですべての 8th Wall プロジェクトと サンプルに含まれています)を使用している場合、シーンとアセットのロード中にローディング画面が表示され、ブラウザのパーミッションが受け入れられるのを待っている間に が表示されます。 シーンのロードに長い時間( )がかかったり、シーンが完全に初期化されない場合、この画面( )で永遠に「立ち往生」しているように見えることがある。

考えられる原因

  1. 大きな資産および/または遅いインターネット接続

無線LANや携帯電話の通信速度が遅い場所で、大きなアセットを含むWeb AR ページをロードしようとしている場合、シーンは実際には「スタック」しておらず、 ロードに時間がかかっているだけかもしれません。 ブラウザのネットワークインスペクタを使って、ページが単に アセットのダウンロード中であるかどうかを確認してください。

さらに、シーンアセットの最適化 をできるだけ行うようにしましょう。 これには、テクスチャの圧縮、テクスチャの および/またはビデオ解像度の低減、3Dモデルのポリゴン数の低減などの技術が含まれます。

  1. 背景タブにロックされたカメラ

デバイスやブラウザによっては、すでに他のタブで使用されている場合、カメラを開くことができない場合があります。 カメラを使用している可能性のある他のタブを閉じてから、ページを再読み込みしてみてください。

  1. iOS Safari特有:CSS 要素が video 要素を "画面外" に押し出す

カスタムHTML/CSS要素をWeb ARエクスペリエンスに追加した場合、それらが 、シーンの上に正しくオーバーレイされていることを確認してください。 ページ上のビデオ要素が画面外に押し出された場合、iOS Safariはビデオフィードをレンダリングしません。 これが一連の出来事を引き起こし、8番目の壁が "立ち往生 "しているように見えるのだ( )。 現実はこうだ:

ビデオフィードがレンダリングされない -> AFrameシーンが完全に初期化されない -> AFrameシーンが "loaded "イベントを発行しない -> XRExtras Loadingモジュールが消えない(シーンの "loading" イベントをリッスンしているが、一度も発行されない!)。

これを解決するには、Safariインスペクタの「レイアウト」ビューを使用して、DOMコンテンツの 位置を視覚化することをお勧めします。 多くの場合、 、動画要素が「画面外」/「折りたたみの下」に押しやられている、下の画像のようなものが見られます。

ビデオ・エレメント・オフスクリーン

解決するには、要素のCSSポジショニングを調整し、ビデオフィードが 画面から押し出されないようにします。 絶対位置決め`を使用するのは、これを行う一つの方法である。