When I drag the object with the mouse, it does not rotate

Questions
,
1

Hello everyone, when I drag and rotate my cube object with the mouse, it does not rotate. The problem persists when I adjust Controls and OrbitControls

Code:

import './style.css'
import * as THREE from 'three'
import * as TWEEN from '@tweenjs/tween.js'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let camera,
    scene, 
    renderer, 
    mesh,
    lightPrimary, 
    lightSecondary, 
    raycaster, 
    mockTarget, 
    controls;

const createWorld = () => {
    const cubeGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0)
    
    mesh = new THREE.Mesh(
        cubeGeometry,
        new THREE.MeshLambertMaterial( {
            map: new THREE.TextureLoader().load('/img/3.png'),
            color: 0xffffff, // Küp rengi
            flatShading: true
        })
  );
  scene.add(mesh);
  mesh.receiveShadow = true;

  lightPrimary = new THREE.PointLight(0xffffff, 1.0, 10.0);
  lightPrimary.position.set(2.0, 2.0, 2.0);
  lightPrimary.castShadow = true;
  
  lightSecondary = new THREE.PointLight(0x8888ff, 1.0, 10.0);
  lightSecondary.position.set(-2.0, 2.0, -2.0);
  lightSecondary.castShadow = true;
  
  scene.add(lightPrimary);
  scene.add(lightSecondary);



  const faces = cubeGeometry.index

//   if (faces) {
//     for (let i = 0; i < faces.count; i += 1) {
//       console.log(i % 6 + 1);
//     }
//   } else {
//     console.error('Geometry does not have face indices.');
//   }
};


let stopAnim = false

const animateCube = () => {
    const rotationSpeed = 0.02;
    mesh.rotation.x += rotationSpeed;
    mesh.rotation.y += rotationSpeed;
  };
  

const init = () => {
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000.0);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

  scene.add(new THREE.HemisphereLight(0x9ED9F8, 0x005091, 0.5));

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  renderer.setClearColor(0x333333, 1);

  
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }, false);

  document.body.appendChild(renderer.domElement);
  
  createWorld();
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableZoom = false;

  camera.position.set(-5, 5, 7);
  controls.update()

  raycaster = new THREE.Raycaster();
  mockTarget = new THREE.Object3D();

  camera.getWorldPosition(mockTarget.position);
  camera.getWorldQuaternion(mockTarget.quaternion);
  
  window.addEventListener("dblclick", (event) => {
    const mouse = new THREE.Vector2();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects([mesh]);

    if (!intersects[0]) {
        return;
    } else {
        mesh.rotation.set(0, 0, 0);
        stopAnim = true
        const faceIndex = intersects[0].faceIndex;
        console.log(faceIndex % 6 + 1);
      }
      const {  object,normal } = intersects[0];
      const offset = 5.0;
  
   
      const targetPosition = new THREE.Vector3();
      object.getWorldPosition(targetPosition);
  
      mockTarget.position.copy(targetPosition);
      mockTarget.position.add(
        normal.clone().multiplyScalar(offset)
      );
      
      mockTarget.lookAt(object.position);
      mockTarget.rotateY(-Math.PI);
  
      setTimeout(() => {
          // Zoom in
          new TWEEN.Tween(camera.position)
            .to({ x: object.position.x, y: object.position.y, z: object.position.z}, 1000)
            .easing(TWEEN.Easing.Quadratic.Out)
            .onComplete(() => {
              window.location.href = 'wubba.html'
          })
            .start();
      }, 2000)
     
  });
  
}

const animate = () => {
  requestAnimationFrame(animate);
  if(!stopAnim) {
      animateCube(); // Dönme animasyonu
  }

  TWEEN.update(); 
  controls.update()
  renderer.render(scene, camera); 
  camera.position.lerp(mockTarget.position, 0.1);
  camera.quaternion.slerp(mockTarget.quaternion, 0.1);
}

init();
animate();
2

It looks like your tween operation is overriding the OrbitControls. You probably need to pick one or the other to control the camera.