feat: add UseLoader component

Tresjs · Sep 7, 2024 · 471bd0d · 471bd0d
1 parent bea583f
commit 471bd0d
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 4 deletions.
diff --git a/docs/api/composables.md b/docs/api/composables.md
@@ -221,7 +221,7 @@ The `useLoader` composable allows you to load assets using the [THREE.js loaders
 ```ts
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 
-const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+const { scene } = await useLoader(GLTFLoader, 'path/to/asset.gltf')
 ```
 
 Since the `useLoader` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component. See [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more information.
@@ -234,6 +234,33 @@ Since the `useLoader` composable returns a promise, you can use it with `async/a
 </template>
 ```
 
+### UseLoader as component
+
+You can also use `UseLoader` (with uppercase) as component like so:
+
+```vue
+<script setup lang="ts">
+import { UseLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+</script>
+
+<Suspense>
+  <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
+      <primitive :object="data.scene" />
+</Suspense>
+```
+
+### Props
+
+| Prop | type |
+| ---- | --- |
+| **loader** | `THREE.Loader` |
+| **url** | `String` |
+
+::: warning
+The `UseLoader` component needs to be wrapped in a `Suspense` component in order to work
+:::
+
 ## useTexture
 
 The `useTexture` composable allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). It returns a promise with the loaded texture(s).
@@ -312,7 +339,7 @@ You can also use `UseTexture` (with uppercase) as component like so:
 </Suspense>
 ```
 
-## Props
+### Props
 
 | Prop | type |
 | ---- | --- |

diff --git a/docs/es/api/composables.md b/docs/es/api/composables.md
@@ -93,6 +93,33 @@ Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `asyn
 </template>
 ```
 
+### UseLoader como component
+
+Puedes usar `UseLoader` como componente, de la siguiente forma:
+
+```vue
+<script setup lang="ts">
+import { UseLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+</script>
+
+<Suspense>
+  <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
+      <primitive :object="data.scene" />
+</Suspense>
+```
+
+### Props
+
+| Prop | type |
+| ---- | --- |
+| **loader** | `THREE.Loader` |
+| **url** | `String` |
+
+::: warning
+El componente `UseLoader` necesita estar envuelto por un `Suspense` para poder funcionar
+:::
+
 ## useTexture
 
 El composable `useTexture` te permite cargar texturas utilizando el [cargador de texturas de THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader). Retorna una promesa con la(s) textura(s) cargada(s).
@@ -165,7 +192,7 @@ Puedes usar `UseTexture` como componente, de la siguiente forma:
 </Suspense>
 ```
 
-## Props
+### Props
 
 | Prop | type |
 | ---- | --- |

diff --git a/playground/vue/src/pages/loaders/componentDemo.vue b/playground/vue/src/pages/loaders/componentDemo.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { TresCanvas, UseLoader } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+
+const url = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb'
+</script>
+
+<template>
+  <TresCanvas window-size clear-color="#333">
+    <TresPerspectiveCamera :position="[0, 3, 7]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Suspense>
+      <UseLoader v-slot="{ data }" :loader="GLTFLoader" :url="url">
+        <primitive :object="data.scene" />
+      </useloader>
+    </Suspense>
+    <TresDirectionalLight :position="[0, 10, 0]" :intensity="1" />
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/router/routes/loaders.ts b/playground/vue/src/router/routes/loaders.ts
@@ -9,4 +9,9 @@ export const loaderRoutes = [
     name: 'FBX Loader',
     component: () => import('../../pages/loaders/fbx-loader/index.vue'),
   },
+  {
+    path: '/loader/component',
+    name: 'Loader Component',
+    component: () => import('../../pages/loaders/componentDemo.vue'),
+  },
 ]
diff --git a/src/composables/index.ts b/src/composables/index.ts
@@ -1,4 +1,5 @@
 import UseTexture from './useTexture/component.vue'
+import UseLoader from './useLoader/component.vue'
 
 export * from './useCamera/'
 export * from './useLoader'
@@ -12,4 +13,4 @@ export * from './useTexture'
 export * from './useTresContextProvider'
 export * from './useTresEventManager'
 export { onTresReady } from './useTresReady'
-export { UseTexture }
+export { UseTexture, UseLoader }
diff --git a/src/composables/useLoader/component.vue b/src/composables/useLoader/component.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import type { Loader } from 'three'
+import { useLoader } from './index'
+
+const props = defineProps<{
+  loader: Loader
+  url: string | string[]
+}>()
+
+const data = await reactive(useLoader(props.loader, props.url))
+</script>
+
+<template>
+  <slot :data="data"></slot>
+</template>