The place to try out coding with Babylon.js.
Experimenting and changing any code in the playground and clicking on the Run button will not affect any original code in the playground you currently using. Original code can be restored by refreshing the browser.
The Playground consists of four areas:
The space for the coding editor and rendering area can be adjusted by dragging the vertical bar between them.
In Typescript mode the menu has an orange color theme
index.htmlwhich contains everything necessary to run the code in your browser, including links to external babylon.js and other files.
createScene()function into the editor along with code to initialise the scene variable and provide a camera.
New playgrounds have this URL format
Saved playgrounds have a hash code reference key added to the URL
After editing any saves of the playground are numbered incrementally from one, for example
You might be interested to know that some html templates are also available:
|full.html||show the render area in full screen|
|frame.html||show the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons|
|indexStable.html||use the BJS stable version, not the preview one|
|debug.html||used to run a version of the playground which uses debug version of babylon.js|
|index-local.html||used for local development using VSCode|
Of course the playground is extremely useful to get help from the community. In the forum, simply paste the link of your playground.
You can have fun showing directly your playground imbedded into your message, using iframe. But take note that you have to be sparing with this functionality: this will slow down the loading of your topic.
<iframe src="https://www.babylonjs-playground.com/frame.html#6F0LKI#2" width="400px" height="250px" ></iframe>
so many ways to share an issue
Any errors in your playground are flagged with a red pop-up box containing limited information. After making an adjustment to your code, you need not close the compilation error pop-up. It should close automatically at the next Run, if all errors have been corrected.
Please note that you can name your main function
delayCreateScene instead of
createScene if you want to return a scene without a camera (because for instance you plan to load a scene using
Whenever a scene in the playground needs the use of keys to move an object, such as a mesh or camera, around then the rendering area needs to have the focus. After running the playground ensure that the render area has the focus by clicking inside it before using the keys.