Skip to content

fix(types): useTexture() #401

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alvarosabu merged 1 commit into from
Sep 21, 2023
Merged

fix(types): useTexture() #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 72 additions & 7 deletions src/composables/useTexture/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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
* <TresMeshMatcapMaterial :matcap="matcapTexture" />
* ```
* @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<Texture>
/**
* 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
* <TresMeshStandardMaterial map="texture1" />
* ```
* @see https://tresjs.org/examples/load-textures.html
* @export
* @param paths
* @return A promise of the resulting textures
*/
export async function useTexture<T extends string[]>(
paths: [...T]
): Promise<{ [K in keyof T]: Texture }>
/**
* Composable for loading textures.
* Loads a PBR texture map.
*
* ```ts
* import { useTexture } from 'tres'
Expand All @@ -44,12 +101,20 @@ export interface PBRTextureMaps {
* ```
* @see https://tresjs.org/examples/load-textures.html
* @export
* @param {(Array<string> | { [key: string]: string })} paths
* @return {*} {(Promise<Texture | Array<Texture> | PBRTextureMaps>)}
* @param paths
* @return A promise of the resulting pbr texture map
*/
export async function useTexture<TextureMap extends PBRUseTextureMap>(
paths: TextureMap
): Promise<{
[K in keyof Required<PBRUseTextureMap>]: K extends keyof TextureMap
? Texture
: null
}>

export async function useTexture(
paths: Array<string> | { [key: string]: string },
): Promise<Texture | Array<Texture> | PBRTextureMaps> {
paths: readonly [string] | string[] | PBRUseTextureMap,
): Promise<Texture | Texture[] | PBRTextureMaps> {
const loadingManager = new LoadingManager()
const textureLoader = new TextureLoader(loadingManager)

Expand Down
7 changes: 6 additions & 1 deletion src/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,9 @@ export function deepArrayEqual(arr1: any[], arr2: any[]): boolean {
}

return true
}
}

/**
* TypeSafe version of Array.isArray
*/
export const isArray = Array.isArray as (a: any) => a is any[] | readonly any[]