Conversion.worldToScreen

by Jowed

HTML

<html>

  <head>
    <!-- <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script> -->
    <script src="https://static.matterport.com/showcase-sdk/latest.js"></script>
  </head>

  <body>
    <div id="text"></div>
    <button id="button" type="button">Get Position</button>
    <iframe id="showcase" title="test" frameBorder="0" allowFullScreen allow="xr-spatial-tracking"></iframe>
  </body>

</html>

CSS

body {
  height: 100vh;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

iframe {
  height: 100vh;
  width: 100%;
}

#text {
  position: absolute;
  background: black;
  width: 270px;
  color: white;
  padding: 5px;
  opacity: 0.6;
}

#button {
  position: absolute;
  width: 55px;
  height: 30px;
  display: none;
}

JavaScript

var iframe = document.getElementById('showcase');
var text = document.getElementById('text');
var button = document.getElementById('button');

// this key only works from jsfiddle.
var jsFiddleKey = "6eb9607db19546aebe10dce90aa001fa";
var modelSid = "s131ejFjdbu";


iframe.src = `https://my.matterport.com/show?m=${modelSid}&hr=0&play=1&title=0&qs=1`;

window.MP_SDK.connect(iframe, jsFiddleKey, '').then(async function(sdk) {
	console.debug("SDK Connected");
  let poseCache;
  sdk.Camera.pose.subscribe(function(pose) {
    poseCache = pose;
    //console.log(poseCache)
  });

  const size = {
    w: iframe.clientWidth,
    h: iframe.clientHeight,
  };

  sdk.Pointer.intersection.subscribe(data => {
    const coord = sdk.Conversion.worldToScreen(data.position, poseCache, size);
    console.log(coord);
  });
});