Adding a new camera zooming on an existing object in the scene

[ekaradon]

Hello,

First, I have a lot of fun trying things with this library, thanks for you all to have made this possible. I really like playing with 3D in a declarative way! :)

Problem

So, what I try to do is to display a scene from a top-down perspective with a PerspectiveCamera, but on some conditions add over the already painted scene a new draw of a piece of the scene, allowing us to zoom on it.
So I've followed the example here:
https://codesandbox.io/s/react-three-fiber-viewcube-py4db?file=/src/App.js
I've calculated the piece position, added the required distance from the camera, translated the orthographic camera to this new position, adjusted the frustum of the camera so it focus really only on the object. And it works. Kind of.

  const { gl, scene, camera, size, viewport } = useThree()
  const virtualCam = useRef<OrthographicCameraImpl>()

  useFrame(() => {
    gl.autoClear = true
    gl.render(scene, camera)
    gl.autoClear = false
    gl.clearDepth()
    if (virtualCam.current) {
      gl.render(scene, virtualCam.current)
    }
  }, 1)

 return (
      <OrthographicCamera
        ref={virtualCam}
        makeDefault={false}
        near={1}
        far={10}
        left={0}
        right={20}
        top={30}
        bottom={10}
        position={modelRef.current?.position.clone().add(new Vector3(-3, 0, 5))}
      />
)

The issue is that the object already exists on the scene, so I can't really move the object so it fit the screen layout?
The first problem is that the zoomed object is stretched when the window is maximized (and compressed the other way).
So I thought that I could specify the aspect ratio of my camera but I don't see any way to do that. I've searched for viewport and found some references to viewport being a function, but it does not seem to be the case anymore. And modifying the object "viewport" has no impact on the rendering.
The second issue is that I don't really control how the content will be displayed in the screen. It's a bit weird to play with it. I thought that the view property within the camera could help me position the rendering but clearly it seems to be useful for something else and not this subject. So for now I move the camera around so the object is shown where I want. I feels a bit clumsy.

For reference, $gsimone showed me those examples too:

• https://codesandbox.io/s/r3f-editor-template-6z5g4?file=/src/index.js:4333-4342
• https://codesandbox.io/s/r3f-yogurt-layout-forked-t7is1?file=/src/Panel.js

Now I'm thinking that maybe i should recreate a new scene for this specific object. It seems scene are not too costly to create and destroy. But I've only a reference of the object, not a component ready to be created. Can it be done with a reference too? And is it safe to do so without really knowing what model will be put on the top right of the screen (can we scale the model so it fit inside the given screen space)?

Many thanks :)

[ekaradon]

Hello,

Just thinking it would be better with a codesandbox to show the current state:
https://codesandbox.io/s/viewcube-forked-1i0rm?file=/src/App.js

[drcmda]

i dont understand much, but viewport.getCurrentViewport() gives you fresh data

function getCurrentViewport(
  camera: Camera = get().camera,
  target: THREE.Vector3 = new THREE.Vector3(),
  size: Size = get().size,
)

maybe that helps.

[ekaradon]

Well, I got the size from the hook useThree and it's already fresh. But thanks anyway.
I finally found how I could do what I was looking for:
https://codesandbox.io/s/viewcube-forked-8xbyp?file=/src/App.js
I think this example will help you to understand what I was looking for.
Maybe it could interest someone. Now I can scale up/down a mesh already on the scene and position it somewhere on the screen.
Still interested to know if there would be a better way to do this. 😃

I would like to add options like:

• minWidth
• minHeight
• focusTargetZone (so you could focus on a part of a model instead of the whole thing)
• Decorator (so you could put something around the zoom like a border, a frame, ...

It's probably way too specific for Drei being interested in this kind of thing I suppose?

[ekaradon]

Still slowly incrementing on this and still thinking I'm going the wrong way (but that's the only way I see for now).
So now there is a working demo with an asymetric model (the origin is not in the center of the mesh, so it changes a lot of things):
https://codesandbox.io/s/moving-camera-with-asymetric-model-and-zoom-usez3
Full view: https://usez3.csb.app/

I've added Leva so you can see the effects of Zoom, screen space and screen position.

I need now to adjust the zoom related to the screen position? I need to think about it, I don't even know how to manage this.
For the decoration part, it seems easy, I just need to put the decoration in a specific layer it seems:
https://stackoverflow.com/questions/34099808/how-to-make-objects-visible-to-only-one-camera-in-a-three-js-scene

Don't hesitate to give me some feedback on the subject, I would appreciate it! :)

[ekaradon]

Hello,

So I'm gonna close this discussion because I've finally understood through this exercise that I was doing things wrong. I got a working version without doing all these manipulations. For those interested you can go there check it out:
https://codesandbox.io/s/1wxbv
https://1wxbv.csb.app/

Code could still be cleaned a bit and simplified but the main principles are here and I'm satisfied to be able to crop, decorate, zoom and move around my target on the screen.