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

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(() => {

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>
 ```
 

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.

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.

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>

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

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'),
+  },
 ]

src/composables/index.ts

@@ -1,3 +1,5 @@
+import UseTexture from './useTexture/component.vue'
+
 export * from './useCamera/'
 export * from './useRenderLoop'
 export * from './useRenderer/'
@@ -10,3 +12,4 @@ export * from './useTresContextProvider'
 export * from './useLoop'
 export * from './useTresEventManager'
 export { onTresReady } from './useTresReady'
+export { UseTexture }

src/composables/useLogger.ts

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/consistent-function-scoping */
 /* eslint-disable no-console */
 export const isProd = import.meta.env.MODE === 'production'
 

src/composables/useTexture/component.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useTexture } from './index'
+import type { PBRUseTextureMap } from './index'
+
+const props = defineProps<PBRUseTextureMap>()
+
+const data = await reactive(useTexture(props))
+</script>
+
+<template>
+  <slot :textures="data"></slot>
+</template>

src/composables/useTresEventManager/index.ts

@@ -1,5 +1,3 @@
-/* eslint-disable ts/no-unsafe-function-type */
-/* eslint-disable unicorn/consistent-function-scoping */
 import { shallowRef } from 'vue'
 import type { Object3D, Object3DEventMap, Scene } from 'three'
 import type { EmitEventFn, EmitEventName, Intersection, TresEvent, TresInstance, TresObject } from 'src/types'

src/core/nodeOps.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/consistent-function-scoping */
 import { beforeAll, describe, expect, it, vi } from 'vitest'
 import * as THREE from 'three'
 import type { Vector3 } from 'three'

src/core/nodeOps.ts

@@ -219,7 +219,7 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
         try {
           node.dispose()
         }
-        // eslint-disable-next-line unused-imports/no-unused-vars
+
         catch (e) {
           // NOTE: We must try/catch here. We want to remove/dispose
           // Vue/THREE children in bottom-up order. But THREE objects
@@ -343,7 +343,6 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
     invalidateInstance(node as TresObject)
   }
 
-  /* eslint-disable unicorn/consistent-function-scoping */
   function parentNode(node: TresObject): TresObject | null {
     return node?.__tres?.parent || null
   }

src/env.d.ts

@@ -9,7 +9,7 @@ declare module '*.vue' {
 
 interface Window {
   __TRES__DEVTOOLS__?: {
-    // eslint-disable-next-line ts/no-unsafe-function-type
+
     cb: Function
     // You can add other properties of __TRES__DEVTOOLS__ here if needed
   }

src/types/index.ts

@@ -12,7 +12,7 @@ export type AttachType = string | AttachFnType
 export type DisposeType = ((self: TresInstance) => void) | boolean | 'default'
 
 export type ConstructorRepresentation = new (...args: any[]) => any
-// eslint-disable-next-line ts/no-unsafe-function-type
+
 export type NonFunctionKeys<P> = { [K in keyof P]-?: P[K] extends Function ? never : K }[keyof P]
 export type Overwrite<P, O> = Omit<P, NonFunctionKeys<O>> & O
 export type Properties<T> = Pick<T, NonFunctionKeys<T>>

src/utils/createPriorityEventHook.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/consistent-function-scoping */
 import { createPriorityEventHook } from './createPriorityEventHook'
 
 let updateHook = createPriorityEventHook()

src/utils/index.ts

@@ -451,7 +451,7 @@ export function invalidateInstance(instance: TresObject) {
 }
 
 export function noop(fn: string): any {
-  // eslint-disable-next-line ts/no-unused-expressions
+  // eslint-disable-next-line no-unused-expressions
   fn
 }
 

src/utils/is.ts

@@ -21,7 +21,6 @@ export function bool(u: unknown): u is boolean {
   return u === true || u === false
 }
 
-// eslint-disable-next-line ts/no-unsafe-function-type
 export function fun(u: unknown): u is Function {
   return typeof u === 'function'
 }