この記事は次の言語でも利用可能です

1つのページに複数のツアーを埋め込んで追加する方法

Metareal Stageでは、公開したツアーの埋め込みコードを作成することができます。

それらの埋め込みコードを1つのページ（例：ギャラリー）に追加することで、ツアープレイヤーがページ内のiframeで再生されるようになります（新しいページを開く必要はありません）。

ただし、注意点があります。

WebGLは限られたコンテクストしかサポートしていません。つまり、1つのページの中で、ある数以上の3Dビューを同時に表示することはできず、その数はハードウェアによって異なります。

表示の欠落を防ぐために、同時に1つのiframeをアクティブにすることをお勧めします。そのためには、Webページにコードを追加して、現在のiframeが変更されたことを検知し、古いiframeをスプラッシュ画面にリセットすることができます。これにより、WebGL のコンテクストが不足することはありません。

以下に例としてその方法を示します（JQueryを使用）。

<!DOCTYPE html>

<html>

    <body>

        <script src="/apps/player/node_modules/jquery/dist/jquery.min.js"></script>

        <iframe id="f1" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <iframe id="f2" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <iframe id="f3" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <iframe id="f4" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <iframe id="f5" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <iframe id="f6" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <iframe id="f7" class="myIFrame" width="45%" height="400" src="https://stage.metareal.com/apps/player?asset=d05170ad-4f4e-4403-b15c-59570e94f56c" frameborder="0" allow="vr" allowvr="yes" allowfullscreen="yes"></iframe>

        <script>

            let currentIFrame;

            function checkFocus() {

                let iFrames = [

                    "#f1", "#f2", "#f3", "#f4", "#f5", "#f6", "#f7" 

                ];

                for ( let iFrame of iFrames ) {

                    if ( document.activeElement == $( iFrame ).get( 0 ) ) {

                        if ( currentIFrame && currentIFrame != iFrame && iFrames.includes( currentIFrame ) ) {

                            $( currentIFrame ).get( 0 ).contentDocument.location.reload( true );

                        }

                        // unload previous iFrame

                        currentIFrame = iFrame;

                    }

                }

            }

            window.setInterval(checkFocus, 1000); 

        </script>

    </body>

</html>

更新日 07/07/2021

この記事は役に立ちましたか？

ありがとうございます