Different cameras to choose from and orbitControls (enabled = false - not working)

Questions
,
1

Hello,

I’m trying to do the following in three.js:

  1. we have a floor on which the cube is located,
  2. OrbitControls are assigned to the camera
  3. we have the option of switching the camera to another one
  4. orbitcontrols should be assigned to the new camera
  5. we have addEventListeners ‘mousedown’ - which after clicking on the cube should block orbitcontrols and enable the ‘mousemove’ function - which is responsible for moving the cube
  6. ‘mouseup’ - makes the ankle does not move and the orbits control again

How does it look in practice?
if I call the onMouseDown function at the default camera setting - orbitControls locks and unlocks as intended
if we change the camera - that’s, even though enebled is called false after calling console.log (controls) - orbit controls still work.

I do not know where I’m making a mistake.

Here are pieces of code - the function responsible for changing the camera, the onMouseDown function - to disable controls and the onMouseUp function - which should enable controls.

function choosenCamera(cameraNumber) {
  var newCam;
  if (cameraNumber === 0) {
    newCam = cameras[0];
  } else if (cameraNumber === 1) {
    newCam = cameras[1];
  } else if (cameraNumber === 2) {
    newCam = cameras[2];
  }

  camera.name = newCam.label;
  camera.fov = newCam.FOV;
  camera.aspect = newCam.aspectRatio;
  camera.position.set(newCam.position.x, newCam.position.y, newCam.position.z);
  camera.rotation.set(newCam.rotation.x, newCam.rotation.y, newCam.rotation.z);
   newControls = new THREE.OrbitControls(
    camera,
    document.getElementById('container')
  );
}

function onMouseDown(e) {
  controls.enabled = false;
   move = true;
  this.style.cursor = "all-scroll";
  document
    .getElementById('container')
    .addEventListener("mousemove", onMouseMove, false);
}

function onMouseUp(e) {
  move = false;
  controls.enabled = true;
  this.style.cursor = "default";
  document
    .getElementById(nameId)
    .removeEventListener("mousemove", onMouseMove, false);
  document
    .getElementById('container')
    .removeEventListener("mousedown", onMouseDown, false);
}
2

Which of these below is true.

  • A: You have multiple cameras and but only maintaining 1 OrbitControls throughout the life cycle of app.
  • B: You have multiple cameras but each camera has its own unique OrbitControls that toggles on and off.
  • C: Every time you switch camera, the newCamera creates a brand new OrbitControls.
3

Yeah, i thinked about it and now i know where is mistake.

Answer C is true and now I know, that i need a blocked for a specyfic orbit controls, because controls.enabled - stopped another orbitcontrols than i need.

Anyway, thank you for your answer. :slight_smile: