# Creating multiple scenes in typescript Project

**URL:** <https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233>\
**Category:** Questions\
**Created:** [August 21, 2022, 7:32pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233 "2022-08-21T19:32:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abhishek\_Shakya](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/abhishek_shakya/32/22668_2.png) [@Abhishek\_Shakya](https://forum.babylonjs.com/u/Abhishek_Shakya)\
**Post date:** [August 21, 2022, 7:32pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/1 "2022-08-21T19:32:22Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/c/0cae6b609175e620f229e5bcaee2ba1b442aea0e.jpeg)  
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 repo[https://github.com/AK228212/Multi-Scene-Babylon](https://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.** 🙂

> 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** 😃

---

<div class="post-metadata">

**Author:** ![Rata\_Blanca](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rata_blanca/32/24779_2.png) [@Rata\_Blanca](https://forum.babylonjs.com/u/Rata_Blanca)\
**Post date:** [August 22, 2022, 1:22am UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/2 "2022-08-22T01:22:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Abhishek\_Shakya](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/abhishek_shakya/32/22668_2.png) [@Abhishek\_Shakya](https://forum.babylonjs.com/u/Abhishek_Shakya)\
**Post date:** [August 22, 2022, 2:14am UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/3 "2022-08-22T02:14:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\
**Post date:** [August 22, 2022, 5:42am UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/4 "2022-08-22T05:42:40Z")

</div>

You want transition effect? Here are the docs: [Extra Features | Babylon.js Documentation](https://doc.babylonjs.com/guidedLearning/createAGame/extraFeatures#transition-effect)

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:

> **[Babylon.js Playground](https://playground.babylonjs.com/#0S6R4I%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Abhishek\_Shakya](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/abhishek_shakya/32/22668_2.png) [@Abhishek\_Shakya](https://forum.babylonjs.com/u/Abhishek_Shakya)\
**Post date:** [August 23, 2022, 10:44pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/5 "2022-08-23T22:44:37Z")

</div>

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](https://github.com/AK228212/Multi-Scene-Babylon) this.  
If anyone wants to give me any suggestions on this then please let me know 😃  
@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.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [August 23, 2022, 11:57pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/6 "2022-08-23T23:57:02Z")

</div>

> [@Abhishek\_Shakya](#):
>
> 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?

---

<div class="post-metadata">

**Author:** ![Abhishek\_Shakya](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/abhishek_shakya/32/22668_2.png) [@Abhishek\_Shakya](https://forum.babylonjs.com/u/Abhishek_Shakya)\
**Post date:** [August 24, 2022, 4:12am UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/7 "2022-08-24T04:12:42Z")

</div>

Ok will create and let you know thanks 🙂

---

<div class="post-metadata">

**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\
**Post date:** [August 24, 2022, 12:21pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/8 "2022-08-24T12:21:32Z")

</div>

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):

> **[Babylon.js Playground](https://playground.babylonjs.com/#Y30637%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Abhishek\_Shakya](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/abhishek_shakya/32/22668_2.png) [@Abhishek\_Shakya](https://forum.babylonjs.com/u/Abhishek_Shakya)\
**Post date:** [August 25, 2022, 12:35pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/9 "2022-08-25T12:35:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\
**Post date:** [August 25, 2022, 12:49pm UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/10 "2022-08-25T12:49:44Z")

</div>

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'`

---

<div class="post-metadata">

**Author:** ![Abhishek\_Shakya](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/abhishek_shakya/32/22668_2.png) [@Abhishek\_Shakya](https://forum.babylonjs.com/u/Abhishek_Shakya)\
**Post date:** [August 28, 2022, 7:25am UTC](https://forum.babylonjs.com/t/creating-multiple-scenes-in-typescript-project/33233/11 "2022-08-28T07:25:43Z")

</div>

Thanks buddy 🙂
