diff --git a/docs/docs/tutorial/advanced/_category_.yml b/docs/docs/tutorial/advanced/_category_.yml index b1fde0b..ce6ba7c 100644 --- a/docs/docs/tutorial/advanced/_category_.yml +++ b/docs/docs/tutorial/advanced/_category_.yml @@ -1,2 +1,2 @@ label: "Advanced" -position: 10 \ No newline at end of file +position: 13 \ No newline at end of file diff --git a/docs/docs/tutorial/animation.md b/docs/docs/tutorial/animation.md index fa62f8f..b067133 100644 --- 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 new file mode 100644 index 0000000..5112f80 --- /dev/null +++ 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.
+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('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)
\ No newline at end of file diff --git a/docs/docs/tutorial/binding.md b/docs/docs/tutorial/binding.md index 71a6f2c..42bd111 100644 --- 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 new file mode 100644 index 0000000..ed2bc8f --- /dev/null +++ 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 deleted file mode 100644 index 9142ac2..0000000 --- a/docs/docs/tutorial/drag-drop/_category_.yml +++ /dev/null @@ -1,2 +0,0 @@ -label: "Drag and Drop" -position: 7 \ No newline at end of file diff --git a/docs/docs/tutorial/drag-drop/todo.md b/docs/docs/tutorial/drag-drop/todo.md deleted file mode 100644 index 17d303d..0000000 --- a/docs/docs/tutorial/drag-drop/todo.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar_position: 1 ---- - -# TODO - -Work in progress... diff --git a/docs/docs/tutorial/events/_category_.yml b/docs/docs/tutorial/events/_category_.yml index 0b6b080..f4acf84 100644 --- a/docs/docs/tutorial/events/_category_.yml +++ b/docs/docs/tutorial/events/_category_.yml @@ -1,2 +1,2 @@ label: "Events" -position: 5 \ No newline at end of file +position: 6 \ No newline at end of file diff --git a/docs/docs/tutorial/events/interaction-events.md b/docs/docs/tutorial/events/interaction.md similarity index 70% rename from docs/docs/tutorial/events/interaction-events.md rename to docs/docs/tutorial/events/interaction.md index 0d4c112..fab73a4 100644 --- a/docs/docs/tutorial/events/interaction-events.md +++ b/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 b/docs/docs/tutorial/events/misc.md similarity index 98% rename from docs/docs/tutorial/events/misc-events.md rename to docs/docs/tutorial/events/misc.md index fddd953..be28ec4 100644 --- a/docs/docs/tutorial/events/misc-events.md +++ b/docs/docs/tutorial/events/misc.md @@ -2,7 +2,7 @@ sidebar_position: 1 --- -# Miscellaneous Events +# Miscellaneous This category encompasses animation and resize events.
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 b/docs/docs/tutorial/events/update.md similarity index 99% rename from docs/docs/tutorial/events/update-events.md rename to docs/docs/tutorial/events/update.md index 9bcdfc1..090c66a 100644 --- a/docs/docs/tutorial/events/update-events.md +++ b/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.
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 new file mode 100644 index 0000000..e1c6d6c --- /dev/null +++ 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 deleted file mode 100644 index 3eabcff..0000000 --- a/docs/docs/tutorial/focus-management/_category_.yml +++ /dev/null @@ -1,2 +0,0 @@ -label: "Focus Management" -position: 6 \ No newline at end of file diff --git a/docs/docs/tutorial/focus-management/todo.md b/docs/docs/tutorial/focus-management/todo.md deleted file mode 100644 index 17d303d..0000000 --- a/docs/docs/tutorial/focus-management/todo.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar_position: 1 ---- - -# TODO - -Work in progress... diff --git a/docs/docs/tutorial/index.md b/docs/docs/tutorial/index.md index f058d2b..8e2f106 100644 --- 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 index b42c024..aa6f75f 100644 --- 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 new file mode 100644 index 0000000..31341d3 --- /dev/null +++ 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 index e3345dd..8d02345 100644 --- 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 index 8cb0630..6d394c8 100644 --- 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 index b242900..bdf05e2 100644 --- 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 index 7d14486..3ec4b68 100644 --- 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 index 150957c..60845e9 100644 --- a/docs/src/components/HomepageFeatures/index.tsx +++ b/docs/src/components/HomepageFeatures/index.tsx @@ -98,6 +98,14 @@ const FeatureList: FeatureItem[] = [ Manage InstancedMesh instances as if they were Object3D, simplifying creation and manipulation. ) + }, + { + title: 'Asset Management', + description: ( + <> + Efficiently load and manage external assets and resources for your 3D projects. + + ) } ];