SDK Bug Reproduction Template
by guillermo_matterport
HTML
<head>
<script src="https://static.matterport.com/showcase-sdk/latest.js"></script>
</head>
<body>
<div id='container' class="container">
<iframe id="showcase-iframe" allow='xr-spatial-tracking' frameborder='0'></iframe>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
#showcase-iframe{
width: 100%;
height: 100%;
}
#go-full {
position: absolute;
top: 0;
right: 0;
}
.modal {
position: absolute;
left: 50%;
top: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
JavaScript
const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key
const modelSid = "iHd2kG9XfbZ"; // change to custom model SID
const urlParameters = "&play=1&qs=1";
const iframe = document.getElementById('showcase-iframe')
function connect() {
window.MP_SDK.connect(iframe, key, '')
.then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = `https://my.matterport.com/show/?m=${modelSid}${urlParameters}`;
function loadedShowcaseHandler(mpSdk) {
console.log("Connected to the SDK");
mpSdk.App.state.subscribe(function(appState) {
console.log(appState)
if (appState.phase == mpSdk.App.Phase.PLAYING){
recreateIssue(mpSdk);
}
})
}
function recreateIssue(mpSdk) {
console.log("moving")
mpSdk.Mode.moveTo("mode.floorplan")
}