この記事は次の言語でも利用可能です
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>
この記事は役に立ちましたか?
キャンセル
ありがとうございます