Viewport issues in React-three-fiber

Questions
, ,
1

Hello,

I am trying to get viewport.width after the camera finishes the animation (The camera zoom-in animation after clicking on continue). The issue is that it calculates the viewport before the camera finishes the animation and when the browser gets resized, it then shows the correct viewport.

CodeSandbox URL: Ground reflections and video textures (forked) - CodeSandbox

Viewport in console:
image

Please help me with this.
Thank you.

2

viewport reacts to size changes either by resize observer on the parent node or window resize. you can get current viewport like this:

const { getCurrentViewport } from useThree(state => state.viewport)
...
const { width, height } = getCurrentViewport(camera, [0, 0, 0])

the second arg is optional, it allows you to get viewport for points away from the focus point. you can call this inside useFrame as well and it would follow along your animation. it is not entirely clear what the sandbox you posted is supposed to do.

3

Hello @drcmda,

Thank you for your reply. Actually in the Intro component, the camera animates after clicking on “Continue” I want to use viewport.width in the Ground component. The problem is that the viewport gets calculated before the camera finishes the animation. I want to calculate viewport.width after camera finishes the animation and then use that value in Ground component.

I can’t figure out how to apply in the sandbox… The issue is still there

image
image1330×441 161 KB

It will be really nice of you if you could help me with that.

URL: Ground reflections and video textures (forked) - CodeSandbox

Thank you.

4

it’s using lerp which doesn’t really have an “end”, unless you start comparing current value against end-goal - EPS or something like that. you can use getCurrentViewport with any camera, for instance drei/perspectivecamera which you could put into the scene so that it stays responsive. you could also implement that EPS check in <Intro /> and when it’s reached its goal just state.setSize(width, height) and it will update all components listening to viewport.

5

@drcmda Can you please demonstrate it inside the CodeSandbox?

6

i still dont know what its supposed to do. it would help you you reduce the problem down to a camera intro and a plane without loading screen, reflectors, videos, etc. and already use viewport in the way you want it to work, then comment what you would expect.

7

@drcmda Please check the sandbox again: Ground reflections and video textures (forked) - CodeSandbox

It will be much clear now. First of all, you can see that the scroll rig is not correct on the first start as the viewport is generated before the camera finishes the animation. Second, I want to use the viewport.width value to make the box geometry responsive according to the screen size…

You will notice that after the camera finishes the animation if you resize the window and look at the console log, it will generate/show the correct viewport.

Objective

  • Generate viewport after camera finishes the animation in <Intro/> component
  • Use that value in <Box/> component to make it responsive

Please help me with this.
Thank you.

8

could to reduce it some more. in order for me to really understand what you want. i’d have to browse all that code, i don’t have that much time. just the very basics. make a plane and a box or something like that.

9

@drcmda I have simplified the sandbox. You don’t have to go through all the code. It is just about the viewport. Only 2 components are main. One is the <Intro/> and the second one is <Box1/>.

URL: Ground reflections and video textures (forked) - CodeSandbox

Let me break the steps:

  1. In <Intro/>, the camera animates after clicking on “Continue”
  2. After this, see the console log. You’ll see a big value for viewport.width. Resize the window while looking at the console and you’ll see that the viewport value gets reduced a lot.
  3. The reason for this is that In <Box1/>, the viewport.width gets initialized before the camera finishes animation.
  4. I want to initialize the viewport.width value in <Box1/> component after the camera finishes the animation in <Intro/> component so it calculates the correct viewport and then I want to use this value in <Box1/> component to make it responsive according to the viewport size.

Bonus
You will also notice that the scroll rig gets shorter after resizing the window. As it was not correct at first.

I hope it will help you debug the issue.
Thank you.

10

Hi @drcmda,

I hope you have figured out the solution. I am still waiting for your reply. Please help me with this.