useTexture

A composable to load textures in TresJS scenes.

A composable that allows you to load textures using the THREE.js texture loader into your TresJS scene.

Usage

<script setup lang="ts">
import { useTexture } from '@tresjs/cientos'

const { state: texture, isLoading, error } = useTexture(path)
</script>

<template>
  <TresMesh>
    <TresSphereGeometry />
    <TresMeshStandardMaterial :map="texture" />
  </TresMesh>
</template>

Options

Name	Type	Default	Description
path	`string`	`undefined`	The path to the texture.
manager	`THREE.LoadingManager`	`undefined`	The loading manager to use for the texture.

Return Values

Name	Type	Description
`state`	`Texture \| null`	The loaded texture
`isLoading`	`boolean`	Whether the texture is loading
`error`	`string \| null`	Error message if loading failed

Component Usage

You can also use the UseTexture component directly in your template:

<script setup lang="ts">
import { UseTexture } from '@tresjs/cientos'

const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'

const handleLoaded = (texture: Texture) => {
  console.log('Loaded texture', texture)
}

const handleError = (error: unknown) => {
  console.error('error', error)
}
</script>

<template>
  <UseTexture
    v-slot="{ state: texture }"
    :path="path"
    @loaded="handleLoaded"
    @error="handleError"
  >
    <TresMesh>
      <TresSphereGeometry />
      <TresMeshStandardMaterial :map="texture" />
    </TresMesh>
  </UseTexture>
</template>

FBXModel

A component based on useFBX to load models in TresJS scenes.

useTextures

A composable to load multiple textures efficiently in TresJS scenes.