
## Adding Scene To Workspace

*Note: since Editor v4.4.0, the way to create new scenes has changed. It is highly recommended to update to at least this version.*

By default, a newly created workspace contains one scene. Within a workspace, it is possible to manage multiple
scenes in order to, for example, split the levels of a game.

A newly created scene is always empty and ready to receive new assets, etc.

## Creating A New Scene
To create a new scene in the workspace, just go to the `Assets Browser` panel and select `Add -> Scene...`.

![CreateNewProjectToolbar](/img/extensions/Editor/CreatingProject/create-new-project.webp)

Once clicked, a pop-up appears to ask for the name of the scene. Once the `Finish` button is clicked,
the new scene is created on the file system. Then, the Editor asks whether to continue working
on the current scene or load the new one.

Once a scene has been created, a new folder located at *"`workspacePath`/projects/`sceneName`"* is created containing
all the resources of the scene. Once the new scene is loaded and generated, a new folder located at *"`workspacePath`/scenes/`sceneName`"* is created.



## Creating a workspace.

## Creating an empty workspace
Using the Editor, the first step is to create a new workspace. The workspace allows you to manage workspace-based settings and multiple projects.
It is important to understand that the Editor can't work without a workspace, as it allows you to link scenes with code, export final scenes to the right place, etc.

Once the Editor starts, a welcome page appears and allows you to:
* Open an existing workspace
* Open a recent project (contains the last 3 opened workspaces)
* Create a new workspace.

Let's create a new Empty workspace. This will ask for:
* A port for the local webserver. Any port can be chosen, and the game will be served at `http://localhost:PORT/index.html`
* Watch project using Webpack: projects made with the Editor use the latest ES6 modules of Babylon.JS. The workspace comes with a default configuration using Webpack to build the final dist files. This configuration can be customized. Enabling this option will make the Editor automatically watch the project's source files for us. This is especially useful when we don't need to open any code editor or terminal and just use the Editor.

Finally, let's select an empty folder where the workspace will be created, and the Editor will load the newly created workspace:

![CreatingEmptyWorkspace](/img/extensions/Editor/CreatingWorkspace/create-workspace.webp)

## Understanding the first launch of a workspace
By default, a newly created workspace contains only basic files (assets, source files, etc.). But, to be able to build the project and compile the source files, the dependencies must be installed using npm.

On the first launch of a workspace, the Editor will install the dependencies (TypeScript, WebPack, Babylon.JS, etc.) and then build the project (using WebPack). This can take a while depending on the machine where the Editor is running.

## Understanding the workspace architecture

![CreatingEmptyWorkspace](/img/extensions/Editor/CreatingWorkspace/architecture.webp)

The architecture of a workspace follows the basics of web projects:
* `package.json` describes the workspace and enumerates its dependencies
* `webpack.config.js` describes the configuration of the builder (here using WebPack)
* `tsconfig.json` describes the TypeScript configurations
* `src` folder contains all TypeScript files. In other words, this folder contains all the application's sources
* `projects` folder contains the list of all available projects in the workspace
* `scenes` folder contains all the final scenes (with their files) exported by the Editor. In other words, these exported scenes will be the ones loaded when running the application/game made using the Editor.

## Understanding package.json
The `package.json` file is the main entry point of the project. It contains the list of all dependencies and a list of predefined scripts for the project.

Of course, all these dependencies and scripts can be modified/customized/removed to satisfy the project's requirements. For example, for a multiplayer game, the package `socket.io` (this is just an example) can be added to the dependencies and the `"webserver`" script can be modified to run a custom webserver instead of using the simple `http-server` command.

**Only** the `"build"` script is mandatory and must be available in the `package.json` file. It must also keep its role, which is to build the project, even if the project is fully customized.

## Understanding webpack.config.js
Like the `package.json` file, the Webpack configuration file can be customized to include whatever is needed by the project. By default, it packs the project into a single file (`"bundle.js"`) ready to be imported/called by the `index.html` file.

According to the user's preferences, it is possible to use Webpack plugins (including custom plugins) such as the dev server (more information here: https://webpack.js.org/configuration/dev-server/).

In fact, the `webpack.config.js` file must support both "build" and "watch" modes, as the Editor allows us to automatically build/watch the project instead of typing the commands ourselves. Of course, build and watch commands can be handled ourselves if needed using custom commands. For example:

```bash
npm run watch
```
Or
```bash
npm run build
```



## Renaming a Scene

To rename a scene, just go to the `Assets Browser` panel and rename the scene file by double-clicking its name.

Once accepted, the following folders will be renamed:

- _`workspacePath`/projects/`oldname`_ -> _`workspacePath`/projects/`newname`_
- _`workspacePath`/scenes/`oldname`_ -> _`workspacePath`/scenes/`newname`_

Scene names must be unique. If the folders already exist (in other words, if the scene already exists),
then the operation is aborted.

## Renaming paths in loaders in sources

Paths to scenes loaded in the code must also be updated.

For example:

```typescript
const rootUrl = "./scenes/oldName/";

AppendSceneAsync(rootUrl + "scene.babylon", this.scene, () => {
  // ...
});
```

should be updated to:

```typescript
const rootUrl = "./scenes/newName/";

AppendSceneAsync(rootUrl + "scene.babylon", this.scene, () => {
  // ...
});
```



Learn how to manage workspaces in the Babylon.js Editor.



## Welcome to the Babylon.JS Editor documentation

Welcome to the documentation for the Babylon.JS Editor. A series of tutorials is available to help you understand the basics of the Editor. It is recommended that you read the tutorials before getting started with the Editor.

Please note that the Editor is a community project maintained mostly by Julien Moreau-Mathis ([@luaacro](https://twitter.com/Luaacro)).

## Downloading
The Babylon.js Editor is available as a desktop application using Electron.
When an update is available (new features, bug fixes), you will be notified and the editor will download the new installer for you.

The Editor supports Windows, macOS and Linux and can be downloaded through its website: http://editor.babylonjs.com/

## External tutorials

Some external tutorials are available:

* [Introduction to the Babylon.JS Editor v4](https://www.crossroad-tech.com/entry/babylonjs-editor-v4-introduction-en) by [@Limes2018](https://gist.github.com/flushpot1125)

## External examples

Some project examples are available on GitHub:

* [Using WebXR with Babylon.JS Editor v4](https://github.com/flushpot1125/WebXR_VRController_Editor_template) by [@Limes2018](https://gist.github.com/flushpot1125)

## Useful shortcuts

### Global
* `Ctrl+s` or `Command+s`: save the project.
* `Ctrl+f` or `Command+f`: find a node in the current scene or run a command
* `Ctrl+r` or `Command+r`: run the application/game in the integrated browser
* `Ctrl+b` or `Command+b`: build the project (using Webpack, this can take a while)
* `Ctrl+g` or `Command+g`: generate the project (generates all outputs of the current project (scripts, scene files, etc.))
* `Ctrl+Shift+r` or `Command+Shift+r`: build and run the application/game
* `Ctrl+z` or `Command+z`: Undo action
* `Ctrl+y` or `Command+Shift+z`: Redo action

### In preview
* `f`: focus the selected node
* `t`: enable/disable the position gizmo
* `r`: enable/disable the rotation gizmo
* `w`: enable/disable the scaling gizmo
* `i`: toggle the isolated mode. Isolated mode is used to help debugging a mesh by isolating it. Just select a mesh in the Editor and then type `i`. `escape` to exit isolation mode.
* `suppr.`: remove the selected node
* `Ctrl+c` or `Command+c`: copy the selected node
* `Ctrl+v` or `Command+v`: paste the previously copied node. In the case of a mesh, a new instance will be created instead of a real clone of the mesh.


Babylon.js Editor Workspaces

Coming next

Creating and understanding scenes

Creating new scenes and understanding how they behave in a workspace

Creating and understanding workspaces

Creating a new workspace and understanding its architecture

Renaming a scene

Understanding how to rename a scene