Loaded model doesn't display until window resized about vue-babylonjs HOT 9 OPEN

I have the same issue, still looking for a solution.

from vue-babylonjs.

Any news on this one?

from vue-babylonjs.

by the way: it's not related to the fact that I'm loading an STL file, happens with a simple cube as well...

from vue-babylonjs.

ok, I have found what causes the problem: if the scene is not initially visible (for example sitting on a tab), the problem occurs. If I put the scene on the first tab (it will then be displayed initially) everything is fine.

Any Idea what could be the reason?

from vue-babylonjs.

Hey, sorry for the delay on this. Would you mind preparing a minimally reproducible example? Preferably using Glitch or something similar? Here's a starter example on Glitch.

from vue-babylonjs.

@morphace I hope this is the issue you were facing,
@BrainBacon I just created Glitch to give you an idea as I am facing the same issue.
Glitch Demo

So I am providing the editable link that you can run in separate screen to track the elements.

Before I start, Thanks for providing us with such a wonderful package.

So the issue is, I am trying to make the <div> appears when a button is clicked by a user.
To accomplish this, I hide the div with "display: none;"
and when the button is clicked, this display: none will be changed to "display: block;" which will now be visible on the screen.
However, by doing this, the width and height is fixed at 0px and to fix this, I have to either press F12 or resize the window just like @morphace mentioned.

Could this be a bug with the package?

from vue-babylonjs.

This is what it looks like before clicking the button (<div> is hidden)

This is what it looks like after clicking the button (

is showing now)

This is what happens after we resize window or press F12

I assume it because the canvas is not following its parent's width and height?

from vue-babylonjs.

@SnowNooDLe many thanks for the details. I'll try to carve out some time to take a look soon.

from vue-babylonjs.

我觉得只是因为vue操作虚拟dom导致的，因为很多选项卡默认只会加载第一个选项，当你点击第二个点的时候他才开始加载第二个，很多类似的数据可视化组件有这种问题比如echarts，我建议在vue中使用this.$nextTick，等待dom完全加载出来之后在渲染

from vue-babylonjs.