feat(app): 680 UseTexture composable as component

docs/api/composables.md

@@ -297,6 +297,25 @@ const texture = await useTexture({ map: 'path/to/texture.png' }, loadingManager)
 
 Similar to above composable, the `useTexture` 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.
 
+### UseTexture as component
+
+You can also use `UseTexture` as component like so:
+
+```html
+<Suspense>
+  <UseTexture v-slot="{ textures }" map="path/to/texture.png">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial :map="textures.map" />
+    </TresMesh>
+  </UseTexture>
+</Suspense>
+```
+
+::: warning
+The `UseTexture` component needs to be wrapped in a `Suspense` component in order to work
+:::
+
 ## useSeek
 
 The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports 4 functions which allow you to find child objects based on specific properties.

docs/es/api/composables.md

@@ -150,6 +150,25 @@ Luego puedes vincular las texturas al material.
 
 Similar al composable anterior, el composable `useTexture` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`.
 
+### UseTexture como componente
+
+Puedes usar `UseTexture` como componente, de la siguiente forma:
+
+```html
+<Suspense>
+  <UseTexture v-slot="{ textures }" map="path/to/texture.png">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial :map="textures.map" />
+    </TresMesh>
+  </UseTexture>
+</Suspense>
+```
+
+::: warning
+El componente `UseTexture` necesita estar envuelto por un `Suspense` para poder funcionar
+:::
+
 ## useSeek
 
 El composable `useSeek` proporciona utilidades para recorrer y navegar fácilmente a través de escenas y gráficos de objetos complejos de ThreeJS. Exporta 4 funciones que te permiten encontrar objetos secundarios basados en propiedades específicas.

playground/src/pages/basic/Textures.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, UseTexture } from '@tresjs/core'
+
+const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg'
+</script>
+
+<template>
+  <TresCanvas window-size clear-color="#111">
+    <TresPerspectiveCamera :position="[0, 0, 3]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <OrbitControls />
+    <Suspense>
+      <UseTexture v-slot="{ map }" :map="path">
+        <TresMesh>
+          <TresBoxGeometry />
+          <TresMeshStandardMaterial :map="map" />
+        </TresMesh>
+      </UseTexture>
+    </Suspense>
+    <TresDirectionalLight :position="[4, 4, 4]" />
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>

playground/vue/src/pages/basic/Textures.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { TresCanvas, UseTexture } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg'
+</script>
+
+<template>
+  <TresCanvas window-size clear-color="#111">
+    <TresPerspectiveCamera :position="[0, 0, 3]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <OrbitControls />
+    <Suspense>
+      <UseTexture v-slot="{ textures }" :map="path">
+        <TresMesh>
+          <TresBoxGeometry />
+          <TresMeshStandardMaterial :map="textures.map" />
+        </TresMesh>
+      </UseTexture>
+    </Suspense>
+    <TresDirectionalLight :position="[4, 4, 4]" />
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/basic.ts

@@ -49,4 +49,9 @@ export const basicRoutes = [
     name: '@ready',
     component: () => import('../../pages/basic/ready/index.vue'),
   },
+  {
+    path: '/basic/textures',
+    name: 'Textures',
+    component: () => import('../../pages/basic/Textures.vue'),
+  },
 ]