Camera zoom in and out

Questions
1

I have a quick question I am missing something.

I want to be able to zoom the camera using buttons and I am making a test here Start , I am adding to the camera.position.z -= 0.05 in the render function, it works as expected but when I rotate the object using the OrbitControls the zooming is wrong, I don’t understand what is going on?

Thank you.

2

You move the camera around the object, not the object itself, using OrbitControls. :thinking:

3

When I rotate the camera, this is what OrbitControls dose control the camera.

Is it possible to zoom in and out the camera or using the OrbitControls but when I click a button not using the default mousewheel?

I am still learning threejs everything is so confusing at this point…

4

Something like this with Tween.js:

1 Like
5

Yes this is what I need.

Thank you!

6

It works fine but if the camera is panned in any position when I zoom in or out a rotation is added to the camera, it is possible to fix this?

The bigger the pan the bigger the rotation.

7

You have to take control’s target and camera’s direction in count.
I’ve updated the codepen above.

1 Like
8

Thank you so much for this!

I am wondering why not this functionality is added by default in the OrbitalControls, I mean to be able to zoom in and out not just with the mouse wheel?

9

Can you please update the code to create pann as well like move left, right etc or please point me in the right direction?

Thank you.

10

Move control’s target and camera’s position at the same time and the same direction? :thinking:

11

I tried and it works fine except when rotating the camera, when this happens is not good anumore.

pan(direction){

    this.panObject = {panAmount: -.1}

    // Get the current camera position and target
    const currentTarget = this.controls.target.clone();
    const currentPosition = this.activeCamera.position.clone();

    // Calculate the new target position by panning left
    const newTarget = currentTarget.clone();
    newTarget.x -= this.panObject.panAmount; // Adjust this value to control the pan amount

    // Calculate the new camera position based on the new target
    const newPosition = currentPosition.clone();
    newPosition.x -= this.panObject.panAmount; // Keep the same distance from the target

    // Set the new target and camera positions
    this.controls.target.copy(newTarget);
    this.activeCamera.position.copy(newPosition);

}

12

use camera-controls, all this will go away GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

the problem is fundamentally that you have two pieces of code pulling on the camera, which is a race condition. orbit controls is a sealed control with very limited functionality, if it causes the root issue i would suggest you don’t hack around it. let cc solve it. it operates like orbit controls (but smoother due to unity damping instead of ugly lerp), and it can also be controled programatically.

here’s a react example of this but it’s the same in vanilla, all you need to call is

controls.setLookAt(position, target, true)
1 Like
13

I have tried camera controls but I am using a model and scaling it to fit the viewport and it messed it up, the scale is all wrong and I could not find a way to fix it…

14

If someone knows a solution for this using the default OrbitalControls please let me know, I have spent a few days on this :frowning:

Thank you.

15

You’re only ever setting the x axis of newPosition, you’ll need to do as @prisoner849 has suggested but add / subtract from the x and z position based on a camera “right” or “left” world direction eg something like…

const moveLeft = () => {

  let dir = new THREE.Vector3();
  camera.getWorldDirection(dir);

  const left = new THREE.Vector3();
  left.crossVectors(camera.up, dir).normalize();

  newTarget.add(left)
  newPosition.add(left)
}

const moveRight = () => {

  let dir = new THREE.Vector3();
  camera.getWorldDirection(dir);

  const right = new THREE.Vector3();
  right.crossVectors(dir, camera.up).normalize();

  newTarget.add(right)
  newPosition.add(right)
}

this is untested psuedo code and not complete ( i may have missed some steps in calculating the left and right vectors ( see this post by @prisoner849 ) and you may also want to use left.multiplyScalar(amount) to increase the amount to be moved ) but should put you in the right direction as to what you need to achieve…

1 Like
16

here’s an adapted pen of @prisoner849’s including the above left and right calculations, it doesn’t include the tween but that shouldn’t be too difficult to accomplish at this stage…

1 Like
17

Thank you guys.

I am really impressed with the community here on forum, the best experience I had so far!!!

1 Like