vue-babylonjs icon indicating copy to clipboard operation
vue-babylonjs copied to clipboard

Loaded model doesn't display until window resized

Open morphace opened this issue 5 years ago • 9 comments

Hi,

I load a model (STL file), but it's only displayed when I resize the browser window. I inspected the elements and saw that the canvas height is 0 intially, although I set the width to 100% and the height to 100em.

Thanks, Markus

morphace avatar Jul 11 '19 11:07 morphace

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

giuliobrugnaro avatar Jul 13 '19 10:07 giuliobrugnaro

Any news on this one?

morphace avatar Jul 16 '19 13:07 morphace

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

morphace avatar Jul 16 '19 13:07 morphace

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?

morphace avatar Jul 16 '19 13:07 morphace

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.

BrainBacon avatar Jul 16 '19 20:07 BrainBacon

@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?

SnowNooDLe avatar Jan 02 '20 08:01 SnowNooDLe

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

is showing now) afterclick This is what happens after we resize window or press F12 itsthere I assume it because the canvas is not following its parent's width and height?

SnowNooDLe avatar Jan 02 '20 08:01 SnowNooDLe

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

BrainBacon avatar Jan 06 '20 23:01 BrainBacon

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

zhanghaifei1997 avatar Apr 15 '22 02:04 zhanghaifei1997