feat(app): 680 UseTexture composable as component (#757)

* feat(app): 680 UseTexture composable as component * refactor: change structure, keep standard of tres * fix: linter * docs: add docs
Tresjs · Sep 6, 2024 · f01a897 · f01a897
1 parent bbb375f
commit f01a897
Show file tree

Hide file tree

Showing 19 changed files with 8,797 additions and 10,990 deletions.
diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md
@@ -143,9 +143,12 @@ To avoid errors and unwanted sideeffects, resources created programatically with
   import { dispose } from '@tresjs/core'
   import { useGLTF } from '@tresjs/cientos'
 
-  const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {
-    draco: true,
-  })
+  const { nodes } = await useGLTF(
+    'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+    {
+      draco: true,
+    },
+  )
   const model = nodes.Cube
 
   onUnmounted(() => {

diff --git a/docs/advanced/primitive.md b/docs/advanced/primitive.md
@@ -32,7 +32,11 @@ The same pointer events available on the TresJS components are available on the
 
 ```html
 <template>
-  <primitive :object="meshWithMaterial" @click="onClick" @pointermove="onPointerMove" />
+  <primitive
+    :object="meshWithMaterial"
+    @click="onClick"
+    @pointermove="onPointerMove"
+  />
 </template>
 ```
 

diff --git a/docs/api/composables.md b/docs/api/composables.md
@@ -297,6 +297,38 @@ 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` (with uppercase) as component like so:
+
+```html
+<Suspense>
+  <UseTexture v-slot="{ textures }" map="path/to/texture.png">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial :map="textures.map" />
+    </TresMesh>
+  </UseTexture>
+</Suspense>
+```
+
+## Props
+
+| Prop | type |
+| ---- | --- |
+| **map?** | `String` |
+| **displacementMap?** | `String` |
+| **normalMap?** | `String` |
+| **roughnessMap?** | `String` |
+| **metalnessMap?** | `String` |
+| **aoMap?** | `String` |
+| **alphaMap?** | `String` |
+| **matcap?** | `String` |
+
+::: 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.

diff --git a/docs/es/api/composables.md b/docs/es/api/composables.md
@@ -150,6 +150,38 @@ 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>
+```
+
+## Props
+
+| Prop | type |
+| ---- | --- |
+| **map?** | `String` |
+| **displacementMap?** | `String` |
+| **normalMap?** | `String` |
+| **roughnessMap?** | `String` |
+| **metalnessMap?** | `String` |
+| **aoMap?** | `String` |
+| **alphaMap?** | `String` |
+| **matcap?** | `String` |
+
+::: 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.

diff --git a/playground/vue/src/pages/basic/Textures.vue b/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" :displacement-map="path">
+        <TresMesh>
+          <TresBoxGeometry :args="[1, 1, 1, 50, 50, 50]" />
+          <TresMeshStandardMaterial :map="textures.map" :displacement-map="textures.displacementMap" :displacement-scale="0.1" />
+        </TresMesh>
+      </UseTexture>
+    </Suspense>
+    <TresDirectionalLight :position="[4, 4, 4]" />
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/issues/701/TheExperience.vue b/playground/vue/src/pages/issues/701/TheExperience.vue
@@ -81,7 +81,7 @@ const tOrFFast = shallowRef(false)
 const elapsed = shallowRef(0)
 
 const pool: {
-  // eslint-disable-next-line ts/no-unsafe-function-type
+
   click: Function
   pos: number[]
   group: Group

diff --git a/playground/vue/src/router/routes/basic.ts b/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'),
+  },
 ]