Pivot camera to look at mesh

Questions
1

I’m trying to figure out how to make the camera look at a particular mesh and or point, while keeping its position. - I’ve tried multiple camera types but nothing appears to work as far as I can tell.

My closest attempt is with follow camera and https://www.babylonjs-playground.com/#HJ0SZJ#4
Problem with ^ is the camera speed when hovering a mesh makes it bug out no matter how low I set speeds, and also I’m trying to still allow pivoting in place via click and mouse i.e. arc rotate camera, but inverted.

Ideally I’d think there would be a camera method for all camera types lookAt() which pivots the camera to face a particular point (and stores any locked targets and or whatever for restoration), but:

Anyone happen know how to do this or if there’s something simple I’m missing?

2

Hello,
I probably didn’t understand what you want to do, but have you tried using setTarget on a FreeCamera/UniversalCamera ?
https://www.babylonjs-playground.com/#PJQ3XU#5
(line 58 : focus on the selected mesh)

3

@LeJohn thanks, I did try that, but misinterpreted what was happening, and your PG showed that the camera isn’t actually changing positions like I originally thought. – So not that far off from my immediate use case, mainly just need to animate it.

Anyone know if there is a built in way to animate the rotation when setTarget is called or have to do it manually?

– That said, in a separate use case, I have an arc rotate camera basically orbiting a planet. A lookAt method would still be useful because in that case, I have a 2d gui on top of my screen showing the planets in the current system, and I’d like to basically be able to pause the arc rotate behavior to pivot the camera in its current position to look at an adjacent position on hover. But doing so currently I think I’d have to create a new camera, copy the cameras position, and set target, or something complicated like that.

4

A small radius for your arc rotate camera might work for you. In this case think of the camera on a pivot looking outwards rather than in orbit looking in.

This is done in this https://www.babylonjs-playground.com/#DXE1CV#3. Click on a box to move close to that position and look around with an arc rotate camera.

1 Like
5

This example is, hopefully, more along the lines you are after https://www.babylonjs-playground.com/#DXE1CV#4

6

Hi @thrice,

You can find an example of a camera target animation in my neon demo :

Line 274 of the PG, I use CreateAndStartAnimation on the ‘target’ property of the camera. During the animation the camera stays at the same position.

7

@JohnK unless I’m missing something both PG’s seem to be moving the camera position. I’m trying to pivot the camera without moving it to look toward a mesh. I.e. camera on a tripod.

8

@LeJohn thanks, though I meant built in i.e. the way that setting lockedTarget animates the camera. I know I can do manually, which is what I’m doing for now.

– For anyone else looking solution to the first problem in this thread is (semi pseudo code as it relies on my animation extensions but you get the idea).

Object.defineProperty(BABYLON.FreeCamera.prototype, "$$lookAt", {
  value: function(point) {
    let current_target = this.getTarget() || BABYLON.Vector3.Zero();
    this.setTarget(point.clone());
    let target_rotation = this.rotation.clone();
    this.setTarget(current_target.clone());

    return this.$$animateProperty({
      property: 'rotation',
      type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
      easing: new DM.Easing.SuperFast2(),
      speed: 1,
      to: target_rotation
    });
  }
});
9

My apologies, you are correct the camera does move position. I had assumed that changing the lockedTarget would not affect the camera’s position. It clearly does as can be seen in this PG https://www.babylonjs-playground.com/#DXE1CV#8 where the grey sphere has the camera as parent, clicking on a mesh in the top view and the repositioning of the camera is clearly seen in the lower view.

In this PG it is the alpha value of the camera that is changed and you can see in the lower view that the camera (sphere) does not change position https://www.babylonjs-playground.com/#DXE1CV#9. This is obviously a simplified version as the targets are all set on the same level as the camera so that there is only an alpha rotation. In principal the same idea should work in 3D. Also, of course, an animation using an animatable object could be used instead of an observable.

Also pleased to hear you have found a working solution for you project for yourself.

10

NP, thanks for the reply. Ya that looks more like what I was looking for thanks!