Can't get camera to stop moving when dragging an object around

Hey there,

I’m trying to disable the movement of my camera when you hover over an object to move it around, I’m using OrbitControls to handle the camera’s movement and DragControls to move the object around, I’ve seen another post where they added an EventListener to disable/enable the camera but that doesn’t seem to work for me. Any idea what’s wrong

loadDoorOption(target, order_code, position) {
    let self: AppComponent = this;
    var objects = [];
    let targetObject = self.scene.getObjectByName(target);
    let targetPos = targetObject.getWorldPosition();
    let targetSize = self.objectSize(targetObject);
    var controls = new OrbitControls(this.camera, this.renderer.domElement);
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
    var dragControls = new DragControls(objects, this.camera, this.renderer.domElement);
    dragControls.activate();
    let promise = new Promise(function(resolve, reject) {
      var mtlLoader = new MTLLoader();
      mtlLoader.setPath('../assets/models/door/');
      mtlLoader.load(order_code.toLowerCase() + '.mtl', function(materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setPath('../assets/models/door/');
        objLoader.setMaterials(materials);
        objLoader.load(
          order_code.toLowerCase() + '.obj',
          function(object) {
            object.name = 'door-' + position;
            let pos = self.calculateDoorPosition(
              object,
              position,
              targetObject
            );
            object.position.x = pos.x;
            object.position.y = pos.y;
            object.position.z = pos.z;

            var scaleHeight;
            if (
              self.selectedConfiguration.cdcCustomData.wallsHeightRatio !== 1
            ) {
              scaleHeight =
                1 / self.selectedConfiguration.cdcCustomData.wallsHeightRatio;
            } else {
              scaleHeight = 7.875 / self.selectedConfiguration.height;
            }
            object.scale.set(1, scaleHeight, 1);

            object.traverse(function(child) {
              if (child instanceof THREE.Mesh && child.name.includes('glass')) {
                child.material = self.glassMaterial;
              }
            });
            targetObject.add(object);
            objects.push(object.children[0]);
            resolve(object);
          },
          dragControls.addEventListener('drag', event => {
            event.object.position.z = 0;
          }),
          self.onProgress,
          self.onError
        );
      });
    });
    return promise;
  }

You are not disabling the camera but OrbitControls in these event listeners. Just do it like in the official example of THREE.DragControls.

I’ve already ported the code to a fiddle for you and change from TrackballControls to OrbitControls.

https://jsfiddle.net/janqhxdu/

2 Likes