ローディング画面がずっと表示される
問題点
WebARにアクセスすると、スピナーが回ったままでローディング画面がずっと表示される。
なぜこの問題が発生するのでしょうか？
XRExtras Loading モジュール (すべての 8th Wall プロジェクトと サンプルにデフォルトで含まれています) を使用している場合、シーンとアセットのロード中にローディング画面が表示され、ブラウザのパーミッションが受け入れられるのを待っている間に を表示します。 シーンのロードに長い時間がかかったり、何かの原因でシーンの初期化が完全にできなかったりすると、この画面が永遠に表示されているように見えることがあります。
想定される原因
- 大容量のアセットと遅いインターネット回線
無線LANや携帯電話の通信速度が遅い場所で、大容量のアセットを含むWeb AR ページを読み込もうとすると、シーンが「動 かない」のではなく、 のロードに時間がかかるだけかもしれません。 ブラウザのネットワークインスペクタを使って、ページが単に アセットのダウンロード処理中であるかどうかを確認してください。
さらに、シーンアセットの最適化をお試しください。 これには、テクスチャの圧縮、テクスチャ やビデオ解像度の削減、3Dモデルのポリゴン数の削減などの方法が含まれます。
- カメラがバックグラウンドタブにロックされている
端末やブラウザによっては、すでに他のタブでカメラが使用されている場合、カメラを開くことができない場合があります。 カメラを使用している可能性のある他のタブを閉じてから、ページを再読み込みしてみてください。
- iOS Safariのみ発生: CSS要素がvideo要素を "画面の外 "に押し出してしまう。
Web ARにカスタムHTMLやCSS要素を追加した場合、それらがシーンの上を正しく覆っていることを確認してください。 ページ上のビデオ要素が画面外に押し出された場合、iOS Safariはビデオをレンダリングしません。 その結果、一連のイベントが引き起こされ、8th Wallが「動かない」ように見えるのです。 実際にはこのようになっています。
ビデオがレンダリングされない -> A-Frameシーンが完全に初期化されない -> A-Frameシーンが 「loaded」イベントを発行しない -> XRExtras Loadingモジュールが消えない (シーンの「loading」イベントを待機しているが発行しない)
これを解決するには、Safariインスペクタの「レイアウト」ビューを使用して、DOMコンテンツの 位置を視覚化することをお勧めします。 多くの場合、下の画像のように動画要素が「画面の外」または「折り目の下」に押しやられていることがあります。
解決するには、CSSで要素の位置を調整し、ビデオを画面から押し出さないようにします。 CSSのabsoluteプロパティを使用するのも1つの方法です。