Intersecting objects to manipulate after switching from perspective to ortho camera

Questions
1

Hi all,

I am playing around with ThreeJS and have been stuck on this problem for a week now.

I have a scene where I can add a tall object, and see it in perspective view. I added a functionality to be able to drag the wall of the object to change its shape. The functionality works when staying in perspective camera, but because I want the user to see a grid to help him, I want to switch to ortho camera (so you can drag the wall over the grid). The switch works now, but the handle to drag the wall still sticks in the position of the perspective camera. See image.

Anyone an idea why? I siwtch the camera like this (and update world matrix):

"

async switchCamera(type: string){
console.log(‘switching’)
let cameraPosition = this.activeCamera.position.clone();
let cameraMatrix = this.activeCamera.matrix.clone();

if (type == 'pers'){
  this.activeCamera = this.persCamera;
  this.controls.enabled = true;
} else if (type = 'orth'){
  this.activeCamera = this.orthCamera;
  this.controls.enabled = false;
}

this.activeCamera.position.copy(cameraPosition)
this.activeCamera.matrix.copy(cameraMatrix)
this.activeCamera.updateMatrixWorld();

this.controls.object = this.activeCamera;
this.controls.update();

}
"

My raycaster is set to:

*raycaster.setFromCamera(mouse, this.scene.orthCamera)*

With mouse working using:

*let mouse = new THREE.Vector2();*

  • // get bounding client rectangle*

  • let rect = renderer.domElement.getBoundingClientRect();*

  • // set mouse position*

  • mouse.x = ( (event.clientX - rect.left) / canvas.clientWidth ) * 2 - 1;*

  • mouse.y = ( (event.clientY - rect.top) / canvas.clientHeight ) * -2 + 1;*

If anyone knows something that would help, that would be great!

2

Hey @QailBee! Could you please create a small example of your issue in a fiddle for us? This is likely an easy fix, but it’s hard to investigate what’s happening without a live example.

Feel free to fork this fiddle to recreate your issue: Three JSFiddle Skeleton - JSFiddle - Code Playground

:sunglasses:

3

Hi notchris, I made a fast fiddle. The annoying thing is, it is working in the fiddle!

Use space bar to change camera’s, and click to intersect. It logs the name, and if it says sphere when on sphere it works

4

I solved the issue, when plraying with the fiddle. It was a different area in the code that still refered to the persCamera rather than the activeCamera. I can’t believe I spent a whole week finding it!

5

Replicating things in a different environment like a simple fiddle sometimes helps in identifying mistakes that are harder to notice in more complex code. I also spent too much time before realizing a simple comma or dot in the right place fixed the issue, so these things happen once in a while… :slight_smile: