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?
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.
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.
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?
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.
UNWANTED SOLUTION
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!
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):
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.
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
