Engine.resize() on html element size change

Questions
#1

Hi there,

I’m working on a project where we have our canvas on the page, we’ve implemented some interaction with a few html elements.
Based on the interaction from the user with the 3D scene, various elements show/hide, and also our canvas should resize

An illustrative example (not with the 3D canvas but just a placeholder img):

image
image1344×1288 278 KB

As you can see it’s important to keep the center of the scene centered in the div.
That’s why it’s not an option to just slide a sidepanel over 50% of the canvas.
image
image1344×1288 138 KB

For this the engine.resize() doesn’t seem to work, as it’s usually used to resize when your window changes:

  window.addEventListener("resize", function () {
    engine.resize();
  });

I can’t seem to find a good example or solution how to do this when you have a div that’s changing width.

In the end I tried this:
But it’s not fluent at all and not really an option.

  const cnvs = document.getElementById('cnvs') as HTMLElement
  const ro = new ResizeObserver((entries) => {
    engine.resize()
  })

  engine.runRenderLoop(() => {
    scene.render()
    ro.observe(cnvs)
  })

Any help would be very much appreciated!

Thanks
Pieter

#2

May be not the correct approach. In the end, the scene renders from a camera.
I would likely use camera.targetScreenOffset with the offset of the open panel to keep with the centered view of the scene minus panel size. On panel close, zero it.

1 Like
#3

engine.resize() should be called when the canvas size has changed. I believe you are already doing that. And it does seem to work, at last from what I’m seeing. The scene is still centered. I assume you want the entire model to be displayed?

About the resize observer, there is no need to call observe on each frame, only once. This is probably hurting performance (though I’m not sure if it is a no-op if you choose to observe the same element every time). It’s a great solution, and should work the way you described. What is the issue with this approach?

#4

Thanks to the both of you for your feedback.
The camera.targetScreenOffset is a valid solution however if possible I would like the canvas to handle the centering of the camera by using the canvas size. If there is really no other solution this could be still the way to go.

However this is what I’d like to accomplish:

The canvas would resize with a transition to a percentage 50-70% of the full width. And this would be done with a css transition property so everything transitions smoothly.

Therefore the engine.resize() would have to be constantly updated during these transitions, right? This was the reason why I was calling the resize observer within the renderloop.

When doing so I get the following:

Thanks
Pieter