Mattertag Proximity

by Jowed

HTML

<head>
<script src='https://static.matterport.com/showcase-sdk/latest.js'></script>
</head>
<body>
  <div id="container">
    <iframe id="showcase-iframe" allow='xr-spatial-tracking; fullscreen' 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%;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key
const modelSid = "iL4RdJqi2yK"; // 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}`;

async function loadedShowcaseHandler(mpSdk) {
	console.log("Connected to the SDK");
  
  let tags;
  const sensor = await mpSdk.Sensor.createSensor(mpSdk.Sensor.SensorType.CAMERA);
  const proximity = 5; // meters
  
  // setup source for each tag
  mpSdk.Mattertag.data.subscribe({
  	onAdded: async function(idx, item){
    	mpSdk.Mattertag.remove(item.sid);
      item.visible = false;
    	tags[item.sid] = item;
      const source = await setupSource(item, 5)
      console.log(source);
      sensor.addSource(...[source]);
    },
    onUpdated: function(idx, item){
    	const vis = tags[item.sid].visible;
      tags[item.sid] = item;
      tags[item.sid].visible = vis;
    }
  });
	
  // subscribe sensor to sources
  sensor.readings.subscribe({
    onAdded: updateMattertags,
    onUpdated: updateMattertags
  });
  
  sensor.showDebug(true);
  
  // functions

  async function setupSource(tagObject, proximity){
		const source = mpSdk.Sensors.createSource(mpSdk.Sensor.SourceType.SPHERE, {
    	origin: {
      	x: tagObject.anchorLocation.x + tagObject.stemVector.x,
        y: tagObject.anchorLocation.y + tagObject.stemVector.y,
        z: tagObject.anchorLocation.z + tagObject.stemVector.z,
      }, // disc position
      radius: proximity,
      userData: {
      	tagSid: tagObject.sid 
      }
    });
    
		return source;
  }
  
  function updateMattertags(source, reading){
  	console.log("update mattertags called for tag " + source.userDaa.tagSid);
  	const tagSid = source.userData.tagSid;
  	if(reading.inRange &&...