threejs-viewer-30

constructor(container) {
  //... othe code snippet above
  this.onMouseClicked = this.onMouseClicked.bind(this); //!<<< Add this line
}

// Replace this one in buildEvents() this.renderer.domElement.addEventListener( 'click', this.onMouseClicked );

init() {
    //... othe code snippet above
    this.sensorManger = new SensorManager(this);  //!<<< Add this line
    // Other function calls
    this.clock = new THREE.Clock();
    //…
}

//>>>>>>>>>>>>>> Replace all Start
clientToViewport(clientX, clientY) {
    let rect = this.renderer.domElement.getBoundingClientRect();
    return new THREE.Vector3( ((clientX + 0.5) / rect.width) * 2 - 1, -((clientY + 0.5) / rect.height) * 2 + 1, 1);
}

viewportToClient(viewportX, viewportY) {
    let rect = this.renderer.domElement.getBoundingClientRect();
    return new THREE.Vector3( (viewportX + 1) * 0.5 * rect.width - 0.5, (viewportY - 1) * -0.5 * rect.height - 0.5, 0);
}

worldToClient(point) {
    let p = new THREE.Vector4(point.x, point.y, point.z, 1);
    p.applyMatrix4(this.camera.matrixWorldInverse);
    p.applyMatrix4(this.camera.projectionMatrix);
    // Don't want to mirror values with negative z (behind camera)
    if (p.w > 0) {
        p.x /= p.w;
        p.y /= p.w;
        p.z /= p.w;
    }
    return this.viewportToClient(p.x, p.y);
}
//<<<<<<<<<<<<< Replace all End

const dataSource = [
    // ... Other code snippet above
    {
        title: 'Focus',
        key: 'focus-selected'
    },
    {
        title: 'Add Sensor',
        key: 'add-sensor'
    },
    {
        title: 'Remove Sensor',
        key: 'remove-sensor'
    },
    // ... Other code snippet below
];

const callBack = async (key) => {      //!<<< Add async keyword
     // ... Other code snippet above
     case 'focus-selected':
         if (this.selection.length <= 0) return;

         this.fitToView(this.selection);
         break;
      case 'add-sensor':
         if (this.selection.length <= 0) return;

         dbId = this.selection[0];
         this.clearSelection();

         await this.sensorManger.addSensorAsync(dbId);
         break;
      case 'remove-sensor':
         if (this.selection.length <= 0) return;

         dbId = this.selection[0];
         this.clearSelection();

         await this.sensorManger.removeSensorAsync(dbId);
         break;
       // ... Other code snippet below
};

// Modify content of this.container.addEventListener('contextmenu', ...
const hideSelectedMenuItem3 = document.querySelector('#contextMenu li[data-key="focus-selected"]');
const hideSelectedMenuItem4 = document.querySelector('#contextMenu li[data-key="add-sensor"]');
const hideSelectedMenuItem5 = document.querySelector('#contextMenu li[data-key="remove-sensor"]');

if (this.selection.length > 0) {
   // ... Other code snippet above
   hideSelectedMenuItem2.style.display = 'block';
   hideSelectedMenuItem3.style.display = 'block';

   if (document.querySelector(`label.markup[data-objectId="${this.selection[0]}"]`)) {
       hideSelectedMenuItem4.style.display = 'none';
       hideSelectedMenuItem5.style.display = 'block';
   } else {
       hideSelectedMenuItem4.style.display = 'block';
       hideSelectedMenuItem5.style.display = 'none';
   }
} else {
   // ... Other code snippet above
   hideSelectedMenuItem3.style.display = 'none';
   hideSelectedMenuItem4.style.display = 'none';
   hideSelectedMenuItem5.style.display = 'none';
}

// Add this line to init()
this.sensorManger = new SensorManger(this);


// Add this line to render()
this.sensorManger.calibrateSensorMakeups();


objectLoader.load(url, (obj) => {
  // ... Other code snippet above
  this.sensorManger.showAllMarkups(); //!<<< Add this line
});