diff --git a/src/composables/useTexture/index.ts b/src/composables/useTexture/index.ts
index 6df42c72e..98505a147 100644
--- a/src/composables/useTexture/index.ts
+++ b/src/composables/useTexture/index.ts
@@ -1,6 +1,6 @@
-import { isArray } from '@alvarosabu/utils'
import type { Texture } from 'three'
import { LoadingManager, TextureLoader } from 'three'
+import { isArray } from '../../utils'
export interface PBRMaterialOptions {
/**
@@ -22,9 +22,66 @@ export interface PBRMaterialOptions {
export interface PBRTextureMaps {
[key: string]: Texture | null
}
-// eslint-disable-next-line require-await
+
+/**
+ * Map of textures to load that can be passed to `useTexture()`.
+ */
+export interface PBRUseTextureMap {
+ map?: string
+ displacementMap?: string
+ normalMap?: string
+ roughnessMap?: string
+ metalnessMap?: string
+ aoMap?: string
+ alphaMap?: string
+ matcap?: string
+}
+
+/**
+ * Loads a single texture.
+ *
+ * ```ts
+ * import { useTexture } from 'tres'
+ *
+ * const matcapTexture = await useTexture(['path/to/texture.png'])
+ * ```
+ * Then you can use the texture in your material.
+ *
+ * ```vue
+ *
+ * ```
+ * @see https://tresjs.org/examples/load-textures.html
+ * @export
+ * @param paths
+ * @return A promise of the resulting texture
+ */
+export async function useTexture(paths: readonly [string]): Promise
+/**
+ * Loads multiple textures.
+ *
+ * ```ts
+ * import { useTexture } from 'tres'
+ *
+ * const [texture1, texture2] = await useTexture([
+ * 'path/to/texture1.png',
+ * 'path/to/texture2.png',
+ * ])
+ * ```
+ * Then you can use the texture in your material.
+ *
+ * ```vue
+ *
+ * ```
+ * @see https://tresjs.org/examples/load-textures.html
+ * @export
+ * @param paths
+ * @return A promise of the resulting textures
+ */
+export async function useTexture(
+ paths: [...T]
+): Promise<{ [K in keyof T]: Texture }>
/**
- * Composable for loading textures.
+ * Loads a PBR texture map.
*
* ```ts
* import { useTexture } from 'tres'
@@ -44,12 +101,20 @@ export interface PBRTextureMaps {
* ```
* @see https://tresjs.org/examples/load-textures.html
* @export
- * @param {(Array | { [key: string]: string })} paths
- * @return {*} {(Promise | PBRTextureMaps>)}
+ * @param paths
+ * @return A promise of the resulting pbr texture map
*/
+export async function useTexture(
+ paths: TextureMap
+): Promise<{
+ [K in keyof Required]: K extends keyof TextureMap
+ ? Texture
+ : null
+}>
+
export async function useTexture(
- paths: Array | { [key: string]: string },
-): Promise | PBRTextureMaps> {
+ paths: readonly [string] | string[] | PBRUseTextureMap,
+): Promise {
const loadingManager = new LoadingManager()
const textureLoader = new TextureLoader(loadingManager)
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f1ab318fc..c0efe2899 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -121,4 +121,9 @@ export function deepArrayEqual(arr1: any[], arr2: any[]): boolean {
}
return true
-}
\ No newline at end of file
+}
+
+/**
+ * TypeSafe version of Array.isArray
+ */
+export const isArray = Array.isArray as (a: any) => a is any[] | readonly any[]