Transient Tags

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' frameborder='0'></iframe>
    <button id="addTag" class="btn">Add Tag</button>
    <form class="input">
      <label for="x">x: </label><input id="x" type="text">
      <label for="y">y: </label><input id="y" type="text">
      <label for="z">z: </label><input id="z" type="text">
      <div class="break"></div>
      <input id="edit" type="submit" value="Edit Tag">
    </form>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100vw;
  height: 80vh;
  display: flex;
  flex-flow: column nowrap;
}
#showcase-iframe{
  width: 100%;
  height: 100%;
}
.btn{
  margin-top: 10px;
  height: 25px;
  width: 30%;
  align-self: center;
}
.click-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    align-self: center;
    z-index: 1;
}

.input{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.input > *{
  margin-top: 15px;
  margin-left: 5px;
  margin-right: 5px;
}
.break {
  flex-basis: 100%;
  height: 0;
}
#edit{
  width: 100px;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key
const modelSid = "iL4RdJqi2yK"; // change to custom model SID
const urlParameters = "&play=1&qs=1";
const isFirefox = navigator.userAgent.indexOf("Firefox") > -1;

let selectedTag;
let editTag;

const iframe = document.getElementById('showcase-iframe');
const container = document.querySelector('.container');

function connect() {
	window.MP_SDK.connect(iframe, key, '3.9')
    .then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = `https://my.matterport.com/show/?m=${modelSid}${urlParameters}`;


function loadedShowcaseHandler(mpSdk) {
	console.debug("Connected to the SDK");
  
  setupClickDetections(mpSdk);
  
  document.getElementById('addTag').addEventListener('click', async function(){
    selectedTag = await addTag(mpSdk);
    if(isFirefox) overlayDetect();
  });
  
  mpSdk.Pointer.intersection.subscribe(intersection => {
  	updateTagPosition(intersection.position, intersection.normal);
  });
  
  
  
  function updateTagPosition(position, normal={x: 0, y: 1, z: 0}, stemScalar=0.33){
    if(!selectedTag) return;
    mpSdk.Mattertag.editPosition(selectedTag, {
      anchorPosition: position,
      stemVector: {
      	x: normal.x * stemScalar,
        y: normal.y * stemScalar,
        z: normal.z * stemScalar,
      }
    });
	}

  async function addTag(){
    let sid = await mpSdk.Mattertag.add({
      stemVector: { 
        x: 0,
        y: 0.30,
        z: 0,
      },
      anchorPosition: {
        x: 0,
        y: 0,
        z: 0,
      },
      stemVisible: true
    });
    return sid[0];
  }

  function placeTag(){
    mpSdk.Mattertag.navigateToTag(selectedTag);
    selectedTag = null;
  }

    function setupClickDetections(){
      if(!isFirefox){
        focusDetect();
      }else{
        overlayDetect();
      }

      function focusDetect(){
        const eventListener = window.addEventListener('blur', function() {
          if (document.activeElement ===...