Comment ajouter plusieurs visites intégrées sur une seule page
Metareal Stage vous permet de créer des codes d'intégration pour vos visites publiées.
Ces codes intégrés peuvent être ajoutés à une seule page (par exemple une galerie) afin que le joueur de la visite joue dans une iframe au sein de la page (sans en ouvrir une nouvelle).
Il y a cependant une mise en garde.
WebGL ne prend en charge qu'un nombre limité de contextes. Cela signifie que vous ne pouvez pas avoir plus d'un certain nombre de vues 3D simultanées sur une seule page, et ce nombre dépend du matériel.
Afin d'éviter toute perte d'affichage, nous vous recommandons de n'avoir qu'une seule iframe active à la fois. Pour ce faire, vous pouvez ajouter du code dans votre page Web pour détecter que l'iframe actuelle a changé et réinitialiser l'ancienne iframe sur l'écran de démarrage. Cela garantira que vous ne manquerez jamais de contextes WebGL.
Voici un exemple (utilisant JQuery) qui illustre comment procéder :
Ces codes intégrés peuvent être ajoutés à une seule page (par exemple une galerie) afin que le joueur de la visite joue dans une iframe au sein de la page (sans en ouvrir une nouvelle).
Il y a cependant une mise en garde.
WebGL ne prend en charge qu'un nombre limité de contextes. Cela signifie que vous ne pouvez pas avoir plus d'un certain nombre de vues 3D simultanées sur une seule page, et ce nombre dépend du matériel.
Afin d'éviter toute perte d'affichage, nous vous recommandons de n'avoir qu'une seule iframe active à la fois. Pour ce faire, vous pouvez ajouter du code dans votre page Web pour détecter que l'iframe actuelle a changé et réinitialiser l'ancienne iframe sur l'écran de démarrage. Cela garantira que vous ne manquerez jamais de contextes WebGL.
Voici un exemple (utilisant JQuery) qui illustre comment procéder :
<!DOCTYPEhtml>
<html>
<corps>
<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="oui" Allowfullscreen="oui"></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="oui" Allowfullscreen="oui"></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="oui" Allowfullscreen="oui"></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="oui" Allowfullscreen="oui"></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="oui" Allowfullscreen="oui"></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="oui" Allowfullscreen="oui"></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="oui" Allowfullscreen="oui"></iframe>
<script>
laissez currentIFrame ;
fonction checkFocus() {
laissez iFrames = [
"#f1", "#f2", "#f3", "#f4", "#f5", "#f6", "#f7"
];
pour (laissez iFrame des iFrames) {
if ( document.activeElement == $( iFrame ).get( 0 ) ) {
if ( currentIFrame && currentIFrame != iFrame && iFrames.includes( currentIFrame ) ) {
$( currentIFrame ).get( 0 ).contentDocument.location.reload( true );
}
// décharge l'iFrame précédent
courantIFrame = iFrame ;
}
}
}
window.setInterval(checkFocus, 1000);
</script>
</corps>
</html>Mis à jour le : 18/10/2023
Merci !