Unable to bind activeobject on the hover

[yash_chapani]

I have load STL file in the editor and then after I want to hover on that object with drag control so after hoverOn transform control to controller show, this have allready work perfect in the old version pakcage code but same code not work, because

In old version pakcage code hoveron fucntion only called that object loadStl file object but new version code misleading

async init() {
    await this.addScene();
    await this.addRenderer();
    await this.addCamera();
    await this.addLight();
    await this.addGridHelper();
    await this.addControl();
    await this.addTransformControl();
    await this.addDragControl();
    this.renderCanvas();
  }

  addScene() {
      this.scene = new THREE.Scene();
  }

  addRenderer() {
      this.renderer = new THREE.WebGLRenderer({
          antialias: true,
          canvas: this.canvas,
          alpha: true,
      });
      // this.renderer.setClearColor(0xffffff, 1);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
  }

  addCamera() {
      const aspectRatio = this.getAspectRatio();
      this.camera = new THREE.PerspectiveCamera(45, aspectRatio, 0.1, 2000);
      this.camera.position.set(0, 4, 6);
  }

  addLight() {
    var light;
    this.scene.add(new THREE.AmbientLight(0x666666));
    
    var lightobjgeo = new THREE.SphereGeometry(0.3, 4, 2);
    var material = new THREE.MeshPhongMaterial({
        color: new THREE.Color().setHSL(Math.random(), 1, 0.75),
        flatShading: true,
        specular: 0x111111,
        shininess: 0
    });
    
    this.lightobj = new THREE.Mesh(lightobjgeo, material);
    this.lightobj.position.set(2, 8, 4);
    this.lightobj.name = 'light';

    light = new THREE.DirectionalLight(0xdfebff, Math.PI * 2);
    light.position.copy(this.lightobj.position);
    light.castShadow = true;
    light.shadow.mapSize.width = 1500;
    light.shadow.mapSize.height = 1500;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500;

    this.lightobj.add(light);
    this.scene.add(this.lightobj);
    this.updateObjectList();
  }
  copyValue(tmp) {
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").setAttribute('value', tmp);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
    this.utils.showSuccess('Copied', false, 2000);
  }
  addGridHelper() {
      this.ground = new THREE.GridHelper(40, 40);
      this.ground.name = "ground";
      this.scene.add(this.ground);
  }

  addControl() {
      this.orbitcontrols = new OrbitControls(this.camera, this.renderer.domElement);
      this.orbitcontrols.rotateSpeed = 1;
      this.orbitcontrols.zoomSpeed = 2;
      this.orbitcontrols.panSpeed = 1;
      this.orbitcontrols.minDistance = 1;
      this.orbitcontrols.maxDistance = 100;
      this.orbitcontrols.enableKeys = false;
      this.orbitcontrols.update();

      this.orbitControlChangeRef = this.renderCanvas.bind(this);
      this.orbitcontrols.addEventListener('change', this.orbitControlChangeRef);
  }

  addTransformControl() {
    this.transformcontrols = new TransformControls(this.camera, this.renderer.domElement);
    this.transformcontrols.addEventListener('change', this.renderCanvas.bind(this));

    this.transformcontrols.addEventListener('mouseDown', () => {
        this.orbitcontrols.enabled = false;
    }); 
    this.transformcontrols.addEventListener('mouseUp', () => {
        this.orbitcontrols.enabled = true;
        this.getObjectPosition();
        this.getObjectRotation();
        this.getObjectScale();
    });

    this.scene.add(this.transformcontrols);
  }

  addDragControl() {
    this.dragControls = new DragControls(this.objects, this.camera, this.renderer.domElement);
    this.dragControls.addEventListener('hoveron', this.onHoverObject.bind(this));

    // Disable DragControls while TransformControls are active
    this.transformcontrols.addEventListener('dragstart', () => {
        this.dragControls.enabled = false;
    });
    this.transformcontrols.addEventListener('dragend', () => {
        this.dragControls.enabled = true;
    });
  }

  renderCanvas() {
      this.renderer.render(this.scene, this.camera);
  }

async onHoverObject(event) {
    const hoveredObject = event.object;
    if (hoveredObject.isMesh || hoveredObject.isValidHoverObject) { 
        if (hoveredObject !== this.transformcontrols && hoveredObject !== this.orbitcontrols) {
            this.delayHideTransform();

            setTimeout(() => {
              this.transformcontrols.attach(hoveredObject);
              this.activatedObject = hoveredObject;
              this.resetPanel();
              this.isAttached = true;
            }, 500);
            this.getObjectPosition();
            this.getObjectRotation();
            this.getObjectScale();
            this.getMaterial();
            if (hoveredObject.name == 'text') {
                this.getTextGeometry();
                this.textEditor = true;
            }

            await this.cancelHideTransorm();
        }
    }
  }
  
  loadStl(path) {
    return new Promise(resolve => {
      var that = this;
      var loader = new STLLoader();
      loader.load(path, function (geometry) {
        geometry.center();
        var material = new THREE.MeshPhongMaterial({ color: 0xff5533, specular: 0x111111, shininess: 100 });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.name = "stl";
        mesh.position.set(0, 0, 0);
        mesh.rotation.set(0, 0, 0);
        mesh.castShadow = true;
        that.scene.add(mesh);
        that.updateObjectList();
        that.renderCanvas();  
        resolve(null);
      });
    });
  }

Why this happend , I don’t know how to resolved.