JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<head>
  <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script>
</head>
<body>
  <div class="container">
    <iframe id="showcase-iframe" allow='xr-spatial-tracking; fullscreen'></iframe>
    <div class="controls">
      <button id="up">Up</button>
      <button id="left">Left</button>
      <button id="right">Right</button>
      <button id="down">Down</button>
      <span id="data"></span>
    </div>
  </div>
</body>

CSS

.container{
  width: 80vw;
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
}
#showcase-iframe{
  flex-grow: 2;
}
.controls{
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
}
.controls > *{
  padding-top: 10px;
  padding-bottom: 10px;
}
#up{
  flex-basis: 100%;
}
#left{
  flex-basis: 50%;
}
#right{
  flex-basis: 50%;
}
#down{
  flex-basis: 100%;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key

const iframe = document.getElementById('showcase-iframe')
function connect() {
  window.MP_SDK.connect(iframe, key, '3.7')
	  .then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = 'https://my.matterport.com/show/?m=Lvk6xgJcG6W&play=1&qs=1';

function loadedShowcaseHandler(mpSdk) {
	const btnUp = document.getElementById('up');
  const btnLeft = document.getElementById('left');
  const btnRight = document.getElementById('right');
  const btnDown = document.getElementById('down');
  const data = document.getElementById('data');
  
  const view = {
  	x: 0,
    y: 0
  }
  
  setInterval(() => {
  	mpSdk.Camera.setRotation(view,{speed: 500});
  });
  
  const moveBy = 11.25;
  
  btnUp.addEventListener('click', () => {
  	view.x += moveBy;
  });
  btnLeft.addEventListener('click', () => {
  	view.y += moveBy;
  });
  btnRight.addEventListener('click', () => {
  	view.y -= moveBy;
  });
  btnDown.addEventListener('click', () => {
  	view.x -= moveBy;
  });
  
  mpSdk.Camera.pose.subscribe(pose => {
  	data.innerText = `Rotation = { x: ${pose.rotation.x.toFixed(2)}, y: ${pose.rotation.y.toFixed(2)} }`;
  });
  
}