setLookAt doesn't trigger an update of the viewport attributes

[Mohyiddine Oujarrar]

Describe the bug

Im trying to call a setLookAt, and where the camera travels is a conditional rendering of an info card, this info card I am trying to position using Center using width and height of the viewport using useThree hook, the problem while debugging is that the width and height stored after the navigation are still the old state of the viewport, meaning the values are from before the setLookAt navigation. which leads to a mispositioning of the cards that I am trying to put in the scene. How can I trigger a refresh of the useThree vieport values after that navigation?

For now to trigger the positioning, I just resize my page and everything is good.

To Reproduce

Create a setlookat with, viewport dimensions wont be updated after this navigation.

Code

// Calling component with the conditionnal rendering

const targetPosition = new THREE.Vector3();
        scene.getObjectByName(active)?.getWorldPosition(targetPosition);
        cameraControl
          .setLookAt(
            0,
            0,
            4,
            targetPosition.x,
            targetPosition.y,
            targetPosition.z,
            true
          )
          .then(() => {
            cameraControl.minDistance = 4;
            cameraControl.maxDistance = 4;
            cameraControl.maxAzimuthAngle = cameraControl.azimuthAngle;
            cameraControl.minAzimuthAngle = cameraControl.azimuthAngle;
          });
      } 


// Conditionally shown component 

 const { width, height } = useThree((state) => state.viewport);
    const font = 'fonts/Supply Center_Regular.json';
    const color = '#008000';
    return (
        <>
            <Center
                bottom
                right
                position={[-width / 2 - 2, height / 2 + 1, -0.01]}
                rotation-y={Math.PI / 6}
            >
                <RoundedBox
                    args={[2, 2, 0.1]}
                >
                </RoundedBox>
            </Center>
.
.
.

Live example

No response

Expected behavior

useThree should after setlookat refresh its state. For our case the viewport dimensions.

Screenshots or Video

No response

Device

Desktop

OS

Windows

Browser

Chrome

[Akihiro Oyamada]

I think that is intended.
setLookAt does not change the viewport of three.js renderer. it just moves the camera position.

[Mohyiddine Oujarrar]

Thanks for the clarification,

But then is there anyway to trigger or force a viewport dimensions update after navigation?

[Akihiro Oyamada]

Sorry, I don't get the point of "viewport dimensions update".
Could you elaborate a little more?

I think you could just use an event handler or promise.

[Mohyiddine Oujarrar]

const { width, height } = useThree((state) => state.viewport);

That part here, after setLookAt() is triggered, the viewport width and height technically should change, but there is no implicit update and it keeps holding the values before the camera navigation, I would like to trigger an update if that line before after the navigation of the camera ends.