
## Adding Files

To add files, simply browse to the desired folder and click the `Import...` button in the Assets Browser toolbar.
A dialog will open to select the files to add. Once selected and confirmed, all selected assets will be copied to
the currently browsed folder.

Whenever a file is added, its thumbnail is generated if its type is recognized and supported.

![AddingFiles](/img/extensions/Editor/AddingFiles/adding-files.webp)

## Supported Mesh Formats
* .babylon
* .fbx
* .gltf
* .glb
* .obj
* .stl

## Supported texture formats
* .png
* .jpg
* .bmp
* .basis
* .dds (cube texture)
* .env (cube texture)

## Supported sound formats
* .mp3
* .ogg
* .wav




## Adding Meshes To The Scene

To add a new mesh (or hierarchy of meshes, depending on the nature of the source file) to the scene, simply
drag and drop the source file on the preview panel. The mesh(es) will be added where the source file has been
dropped.

When adding meshes to the scene, all skeletons, geometries and materials will be loaded and instantiated in the scene.

Because materials are packed into source files, each material that does not already exist in the assets is created as a `.material` file.

![AddingMeshes](/img/extensions/Editor/AddingMeshes/adding-meshes.webp)

## Updating Existing Meshes

Meshes can be updated even if they were created using an older version of their source files.
Once a source mesh file (.babylon, .fbx, etc.) has been updated in the assets, `right-click the mesh file` and
select `"Update References"`.

Meshes can be updated by:
* Choosing which component to update (geometry, material, skeleton)
* Forcing all components to update (geometry(ies), material(s), and skeleton(s))

![UpdatingReferences](/img/extensions/Editor/AddingMeshes/updating-references.webp)

## Examining Meshes

At any time, `double-clicking a mesh file` in the assets browser opens a new window (or a tabbed window on macOS)
to examine a mesh source file.

Once loaded, the Babylon.JS Inspector appears to inspect the mesh(es) available in the source file.
You can refer to [the inspector documentation](https://doc.babylonjs.com/toolsAndResources/tools/inspector]) to understand how to use the Babylon.JS Inspector.

![ExaminingAsset](/img/extensions/Editor/AddingMeshes/examining-asset.webp)

## Cleaning Assets
To let users manage their own assets, the Editor never removes unused assets unless asked to do so. This means that when you update meshes, old materials and textures remain available in the assets panel. Do not forget to clear unused assets (for example, unused materials and then unused textures) to keep the project clean if you are sure the old assets are no longer needed.



## Introduction

Starting with Babylon.JS Editor v4.1.0, asset management has been improved by introducing a new panel: **"Assets Browser"**.
All assets are now shared across projects and can be browsed as in other popular 3D editors.

The Assets Browser can browse two main asset types:
* Source folder `/src`, which contains all the project's TypeScript, JSON, and other files
* Assets folder `/assets`, which contains all scene assets (textures, meshes, materials, sounds, etc.).

To identify assets quickly, distinct colors are applied to titles:
* `Yellow` represents mesh assets
* `Green` represents material assets
* `Blue` represents particle system assets

## Using Assets Browser

The Assets Browser panel is composed of 2 resizable panes:
* left pane: the directory tree, like we have in any file explorer
* right pane: the content of the selected directory (files & sub-directories)

Each time a directory is selected in the tree (left pane), the right pane is updated to show its content.

![SelectDirectoryTree](/img/extensions/Editor/AssetsIntroduction/select-directory-tree.webp)

The right pane also contains a stack of open folders. This stack shows the currently browsed path
and can be clicked to quickly access a directory available in the stack.

![UseStack](/img/extensions/Editor/AssetsIntroduction/use-stack.webp)

## Using Favorites

At the top of the directory tree, 2 favorite shortcuts are available:
* `All Materials`: shows the list of all available material assets that have been instantiated (used) in the current scene.
* `All Textures`: like materials, shows the list of all available texture assets that have been instantiated (used) in the current scene.

![UsingFavorites](/img/extensions/Editor/AssetsIntroduction/using-favorites.webp)

## Creating a New Folder

New folders can be created at any time. Just right-click an empty space in the panel, select `New Directory...`, and
type the name of the folder to create. Once accepted, a new folder will be created in the currently browsed folder.

![CreatingFolder](/img/extensions/Editor/AssetsIntroduction/creating-folder.webp)

## Selecting Files

As in any other file browser, multiple files can be selected using either:
- `CTRL or Command + Click` to select multiple individual files
- `Shift + Click` to select a range of files

**Note: rectangle selection is not yet available and is still WIP.**

![SelectingFiles](/img/extensions/Editor/AssetsIntroduction/selecting-files.webp)

## Moving Files

Once file(s) have been selected, they can be dragged and dropped into any folder. Once moved, all links to the moved files
are updated automatically by the editor (materials, textures, sounds, etc.).

Until the project is saved, the editor creates a temporary file named `links.json` located at `${workspacePath}/projects/links.json`.
This JSON file stores the latest move actions for each moved file so that, if the project is closed before saving, the real path for linked assets (such as material textures) can still be retrieved.

![MovingFiles](/img/extensions/Editor/AssetsIntroduction/moving-files.webp)

Drag and drop is also supported in the tree.

![MovingFiles](/img/extensions/Editor/AssetsIntroduction/moving-files-tree.webp)


Adding files

Adding Files

Supported Mesh Formats

Supported texture formats

Supported sound formats