Dynamically Positioning Model in Viewport

Hi there - I’m looking to adjust the position of our model inside of a mobile view dynamically. The layout of my model / page looks like this:

I would like to toggle the scale + position of the model between Position A and Position B based on a user interaction, more specifically a state change in the parent React Component.

What’s the best way to do this? Do I need to transform the model itself, adjust the viewport, or adjust the camera?


Hi Tim,
You can move objects in your scene with Interactions :grinning:

And also ajust at the same time the camera is you wish:

@Tim_Thimmaiah let me know if the documentation Pierre-Yves pointed you to helps. It is not clear to me from your message what you are trying to achieve exactly.

I played a bit with the interactions and realized it’s not the solution I’m looking for. Rather than moving the model in the viewport to a different position, I think what I’m really trying to do is to dynamically change the size of the viewport entirely.

The reason for this is to provide a better mobile experience for the user when adjusting the parameters of our model. Since there is limited real estate, we want to give enough space for the user to adjust the model without obstructing it on the screen.

Here are some diagrams that hopefully describe what we’re trying to do - let me know if that helps explain it a bit better!

Ok - playing around with this more, I figured out a solution that works.

Initially, I was attempting to change the height of the <canvas> which I was using as the dom reference to load the viewer into. This was throwing a client side error which led me to believe that the viewport couldn’t be dynamically adjusted.

Instead, I wrapped the canvas in a div for which I could set the height dynamically, and let the child canvas element take up the full height / width of the parent. Dynamically adjusting the parent div gave me the result that wanted.

Thanks again for taking a look into this!