agargaro · agargaro · Nov 11, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 11, 2023
diff --git a/docs/docs/tutorial/advanced/_category_.yml b/docs/docs/tutorial/advanced/_category_.yml
@@ -1,2 +1,2 @@
 label: "Advanced"
-position: 10
+position: 13
diff --git a/docs/docs/tutorial/animation.md b/docs/docs/tutorial/animation.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 5
 ---
 
 # Animation

diff --git a/docs/docs/tutorial/asset-management.md b/docs/docs/tutorial/asset-management.md
@@ -0,0 +1,63 @@
+---
+sidebar_position: 4
+---
+
+# Asset Management
+
+The `Asset` class provides an efficient solution for loading and managing various resources, including 3D models, textures, and other assets in your applications.
+
+
+## Resource Loading
+
+To load a resource synchronously, use the **load** method.
+
+```typescript
+const audioBuffer = await Asset.load(AudioLoader, 'audio.mp3') as AudioBuffer;
+// now the resource is also available using Asset.get('audio.mp3')
+```
+
+## Resource Preloading
+
+Preloading resources is crucial before integrating them into your 3D scene to ensure they are readily available when needed. <br />
+The `Asset` class enables you to define and preload resources, caching them for efficient use before proceeding with scene creation.
+
+### Preloading in a single file
+
+```typescript
+await Asset.loadAll({ 
+  onProgress: (e) => console.log(e * 100 + '%'),
+  onError: (e) => console.error(e)
+}, {
+  loader: TextureLoader,
+  paths: ['texture.jpg', 'texture2.jpg'],
+}, {
+  loader: AudioLoader,
+  paths: ['assets/win.mp3'],
+});
+```
+
+### Preloading in multiple files
+
+**soldier.ts**
+```typescript
+Asset.preload(GLTFLoader, 'https://threejs.org/examples/models/gltf/Soldier.glb');
+
+export class Soldier extends Group {
+  constructor() {
+    super();
+    const gltf = Asset.get<GLTF>('https://threejs.org/examples/models/gltf/Soldier.glb');
+    this.add(...gltf.scene.children);
+  }
+}
+```
+
+**main.ts**
+```typescript
+await Asset.preloadAllPending({ onProgress: (e) => console.log(e * 100 + '%') });
+// gltf and audio are now loaded
+const main = new Main();
+```
+
+## Live Examples
+
+[⚡ Stackblitz - Asset](https://stackblitz.com/edit/three-ez-asset?file=src%2Fmain.ts) <br />
diff --git a/docs/docs/tutorial/binding.md b/docs/docs/tutorial/binding.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 10
 ---
 
 # Binding

diff --git a/docs/docs/tutorial/drag-and-drop.md b/docs/docs/tutorial/drag-and-drop.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 7
+---
+
+# Drag and Drop
+
+Work in progress... 
diff --git a/docs/docs/tutorial/drag-drop/_category_.yml b/docs/docs/tutorial/drag-drop/_category_.yml
diff --git a/docs/docs/tutorial/drag-drop/todo.md b/docs/docs/tutorial/drag-drop/todo.md
diff --git a/docs/docs/tutorial/events/_category_.yml b/docs/docs/tutorial/events/_category_.yml
@@ -1,2 +1,2 @@
 label: "Events"
-position: 5
+position: 6
diff --git a/...ocs/tutorial/events/interaction-events.md → docs/docs/tutorial/events/interaction.md b/...ocs/tutorial/events/interaction-events.md → docs/docs/tutorial/events/interaction.md
@@ -2,6 +2,6 @@
 sidebar_position: 0
 ---
 
-# Interaction Events
+# Interaction
 
 Work in progress... 
diff --git a/docs/docs/tutorial/events/misc-events.md → docs/docs/tutorial/events/misc.md b/docs/docs/tutorial/events/misc-events.md → docs/docs/tutorial/events/misc.md
@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# Miscellaneous Events
+# Miscellaneous
 
 This category encompasses animation and resize events. <br />
 It's important to note that unlike `interaction events`, misc events do not follow a propagation system.

diff --git a/docs/docs/tutorial/events/update-events.md → docs/docs/tutorial/events/update.md b/docs/docs/tutorial/events/update-events.md → docs/docs/tutorial/events/update.md
@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# Update Events
+# Update
 
 Update events are triggered when the value of a property or a state changes. <br />
 It's important to note that unlike `interaction events`, update events do not follow a propagation system.

diff --git a/docs/docs/tutorial/focus-management.md b/docs/docs/tutorial/focus-management.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 8
+---
+
+# Focus Management
+
+Work in progress... 
diff --git a/docs/docs/tutorial/focus-management/_category_.yml b/docs/docs/tutorial/focus-management/_category_.yml
diff --git a/docs/docs/tutorial/focus-management/todo.md b/docs/docs/tutorial/focus-management/todo.md
diff --git a/docs/docs/tutorial/index.md b/docs/docs/tutorial/index.md
@@ -47,3 +47,6 @@ Create smooth animations effortlessly with built-in tweening.
 
 ### Simplified InstancedMesh
 Manage `InstancedMesh` instances with the ease of working with `Object3D`, simplifying creation and manipulation.
+
+## Asset Management
+Efficiently load and manage external assets and resources for your 3D projects.
diff --git a/docs/docs/tutorial/instancedMesh2.md b/docs/docs/tutorial/instancedMesh2.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 9
+sidebar_position: 12
 ---
 
 # InstancedMesh2

diff --git a/docs/docs/tutorial/migration.md b/docs/docs/tutorial/migration.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 14
+---
+
+# Migration
+
+Work in progress..
diff --git a/docs/docs/tutorial/raycasting.md b/docs/docs/tutorial/raycasting.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 10
+sidebar_position: 9
 ---
 
 # Raycasting

diff --git a/docs/docs/tutorial/resizing.md b/docs/docs/tutorial/resizing.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 9
+sidebar_position: 3
 ---
 
 # Resizing

diff --git a/docs/docs/tutorial/tweening.md b/docs/docs/tutorial/tweening.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 9
+sidebar_position: 11
 ---
 
 # Tweening

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -94,10 +94,10 @@ const config = {
           {
             title: 'Community',
             items: [
-              {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/three.ez',
-              },
+              // {
+              //   label: 'Stack Overflow',
+              //   href: 'https://stackoverflow.com/questions/tagged/three.ez',
+              // },
               {
                 label: 'Discord',
                 href: 'https://discord.gg/MVTwrdX3JM',

diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx
@@ -98,6 +98,14 @@ const FeatureList: FeatureItem[] = [
         Manage <code>InstancedMesh</code> instances as if they were <code>Object3D</code>, simplifying creation and manipulation.
       </>
     )
+  },
+  {
+    title: 'Asset Management',
+    description: (
+      <>
+       Efficiently load and manage external assets and resources for your 3D projects.
+      </>
+    )
   }
 ];