Orientate the camera so that a given 3d point is always at a given 2d position in the viewport


Let’s say I have a scene with multiple objects in it, and I want my camera to focus one of them in particular.
But I want my camera to be positioned in such a way that this target oject will be positioned at some specific coordinates in the viewport (for instance let’s say 25% from the left and 50% from the top).

My first idea was to cast a ray on a plane facing the camera, to get the desired 3d position, then get the vector difference between this position and the target object’s position, and move the whole scene along this vector.
But this approach doesn’t seem very elegant to me, and it could probably cause issues in some projects.

That’s why I’m wondering if there’s a way to move the camera itself, rather than the scene, to achieve this result?

Sounds pretty much like a question which popped up again recently:

1 Like

An easy way would be to add the object to camera space.
In this snap_shot, one can see a plane ( upper left corner ) with DDS texture that has a fixed transformation.

That was an interesting post indeed.

The author of the question ended up increasing the width of the rendered viewport to offset the center (see), which isn’t a acceptable solution to me.

Also, the yomotsu/camera-controls repo was mentionned along with this specific demo which is quite interesting as it offsets the camera while keeping the same orbit center.

But it’s not exactly what I want to achieve.
I want to make sure a given point in my scene is always at some specific screen space coordinates.
Imagine a common scenario like this one: you have a full-screen canvas and some html text above it covering the left side of the viewport. Then you’ll need to move the camera in a way that your focus object will be slightly offset to the right.
But I don’t want to arbitrarily offset the camera, because I need to make sure the focus object will always be at the same screen space position (for instance 25% from the right side of the page) regardless of the screen ratio.

It’s easier with an orthographic camera, but with a perspective camera it’s a different story…

Thanks for your answer but I’m not sure I understand. :thinking:
In your example, I would need the center of the 3d face object to be at a given screen space position (like 25% from the left, and 50% from the top).
And I don’t want to move the face itself (because it could be part of a larger scene), so I want to move the camera.
How would that work here?

(putting @mjurczyk red hat on) There is approximately one billion of ways to position a camera like that. You will have to be waaaaaay more specific.

1 Like

Hi and thanks for your answer!

I’ll try to be as specific as I can:

Let’s say I’m making a website with :

  • a full-screen canvas in the background
  • some text above it.

The background canvas displays a 3d space with a red ball positioned at the center (0,0,0).
I have positioned a perspective camera next to it (-2,1,5) and I have use the method camera.lookAt(redBall) so now it’s looking at the ball.

As you can see, the ball is now in the center of the viewport. The problem is that I have some text partially hiding it.

I would like to either:

  • rotate the camera
  • or translate the position of the camera

so that the center of the red ball would be precisely at 2/3 of the viewport width.
This would allow me to control the general layout of the website.

Since I’m making a website, this should work regardless of the aspect ratio.

Like I said earlier, I know I could use a raycaster to get a 3d position from a 2d screenspace position, then move the ball to this 3d position. But I don’t want to do that, because the ball could be part of whole scene with multiple other objects, so I would need to move the entire world along with the ball and that doesn’t seem like a good idea.

What I want (if there’s a way to do it) is to move or rotate the camera, not the object!

Summing up your requirements:

  • a perspective camera
  • 2D HTML text in front (i.e.: on top) of 3D scene
  • shifting of the world not allowed
  • translation/rotation of camera preferred, to see what’s “behind” 2D HTML text

the only solution I can come up with would look something like this, with the light blue representing the camera frustum seen from above (mockup not true to scale):

What you’d be actually ending up with amounts to this (reddish frustum):

If your scene contains some axis-aligned objects, it would be inevitable to have perspective foreshortening on the left side of your scene. I’m not sure if you’d be willing to accept that.

1 Like

that is not what I meant at all, but ok. I will give you this broken code - it moves the camera so that the cube goes under the mouse where you click, but it should not really work and I dont know why it does :sweat_smile:

Thanks @makc3d, it seems to work fine, although I couldn’t solve the problems you pointed out in the code. I think it will still do the trick!