Creating multiple scenes in typescript Project

Hello, Some days ago I’m exploring Twitter and got one post of frame VR as they all are using Babylon. I feel excited to explore it. And got one cool thing of switching scenes with the GUI they’ve created. So I decided to do something similar to that.


And created this. But I can’t able to find smooth ways to switch scenes anyhow.
For a better understanding of this I’ve created one repohttps://github.com/AK228212/Multi-Scene-Babylon. By this anyone can able to get a better idea every time.
Please help me with this cool idea. Better if anyone collaborates with me. :slight_smile:

My idea is to create something which has multiple scenes so if anyone wants to switch over to another scene they can do it.
If anyone has any reference for any git repo then please refer to me.
Thanks and Regards
Babylon newbie :smiley:

1 Like

What do you mean by smooth changing of scenes? Maybe you can consider a world with just one scene and hide invisible objects which are don’t needed at time and load new ones in the background?
Or you can load new scene in the background and create some transition between scenes via shaders, canvas animation or something like that.

Thanks for suggestions but I clearly didn’t get how to do that. And also I want to add n number of world. So animating and changing of world how can be possible I didn’t get idea.

You want transition effect? Here are the docs: Extra Features | Babylon.js Documentation

If you want to know how to switch scenes, currently same question was answered by this playground using mesh picking to switch, but can be easily changed to use buttons:

Hello guys, After getting some ideas from here and exploring different PGs and Projects. I created somewhat like https://github.com/AK228212/Multi-Scene-Babylon this.
If anyone wants to give me any suggestions on this then please let me know :smiley:
@sebavan please add your valuable comments on this.
And even I want to ask:

  1. I have created a stack panel inside the stack panel. And get one issue that I can’t able to place the image and button in the same line. After making panel value isVerticle = true also. Please give me the reference for that.

I’m not sure I fully understand the issue, can you provide us with a Playground reproduction of this?

Ok will create and let you know thanks :slightly_smiling_face:

1 Like

I made a simple playground, just need to use alignments on stacks if you want to reposition your button&image on screen, by default they are centered on screen (in the same line/row):

2 Likes

Cool thanks, Maybe I’m making any mistakes. :slight_smile: And can you tell me one more thing there is button thickness, so how can we change color of thickness.

Here is an example for border (thickness) color of button:

button.color = 'red'

If you want to have a different text color of button:

button.textBlock.color = 'blue'

1 Like

Thanks buddy :slight_smile: