What is Playground?

Few things to note:

  • Experimenting and changing any code in the playground and clicking on the Run button will run your code. Running the code will not affect any original code in the playground you are currently using. Original code can be restored by refreshing the browser.

  • You need to save your changes to create a new version of the the code in Playground. That way, you can share the link with anyone.

Large Screen

  • Title and Version: As stated.

  • Language: Typescript/JavaScript switch.

    • Theme: Choose the theme for the playground

    • Font size: Set the font size in the editor.

    • Safe Mode: When the checkbox is ticked the playground issues a "leaving the page?" confirmation warning when you try to unload/reload a freshly-edited, un-saved scene.

    • Editor: The checkbox hides or un-hides the editor portion of the playground.

    • Full Screen: Makes the render area full screen.

    • Editor Full Screen: Makes the editor area full screen.

    • Format Code: Pretty prints the code.

    • Minimap: Display the minimap of the code editor.

    • Inspector: The checkbox toggles the playground scene inspector which shows a multitude of variable values.

    • Metadata: This is where you describe your playground allowing yourself and other to search the playground database for examples of use.

Small Screens

  • Menu : Contains Run, New, Clear, Save and Zip as submenus.

  • Code : Bottom Left Corner - switch to Code View and Editor.

  • Scene : Bottom Right Corner - switch to Scene View.

Last updated