feat: 611 move cores usetexture to cientos

docs/.vitepress/theme/components/MeshReflectionMaterialDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { MeshReflectionMaterial, SVG as MySVG, OrbitControls } from '@tresjs/cientos'
-import { TresCanvas, useTexture } from '@tresjs/core'
+import { MeshReflectionMaterial, SVG as MySVG, OrbitControls, useTexture } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 
 const normalMapSrc = 'https://raw.githubusercontent.com/'
   + 'Tresjs/assets/main/textures/rock/normal.jpg'
-const normalMap = await useTexture([normalMapSrc])
+const { state: normalMap } = useTexture(normalMapSrc)
 const svgSrc = '/logo.svg'
 </script>
 

docs/.vitepress/theme/components/PBRTexturesDemo.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/* eslint-disable no-console */
+import { computed, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'
+import type { MeshStandardMaterial } from 'three'
+
+// Load the 3D model
+const { nodes, materials } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const cube = computed(() => nodes.value?.BlenderCube)
+const material = computed(() => materials.value?.Material)
+
+// Define texture paths
+const texturePaths = [
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Color.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_NormalGL.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Roughness.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Metalness.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Displacement.jpg',
+]
+
+// Load all PBR textures at once
+const { textures, isLoading, error } = useTextures(texturePaths)
+
+// Apply textures to material when loaded
+watch([material, textures], ([modelMaterial, textures]) => {
+  if (modelMaterial && textures && textures.length === texturePaths.length) {
+    // Cast to MeshStandardMaterial to access PBR properties
+    const pbrMaterial = modelMaterial as MeshStandardMaterial
+
+    // Apply textures
+    pbrMaterial.map = textures[0]
+    pbrMaterial.normalMap = textures[1]
+    pbrMaterial.roughnessMap = textures[2]
+    pbrMaterial.metalnessMap = textures[3]
+    pbrMaterial.displacementMap = textures[4]
+
+    // Set material properties
+    pbrMaterial.displacementScale = 0
+    pbrMaterial.metalness = 0.8
+    pbrMaterial.roughness = 0.2
+  }
+})
+
+// Log loading state and errors
+watch(isLoading, (_loading) => {
+  console.log('isLoading', _loading)
+}, { immediate: true })
+
+watch(error, (errs) => {
+  if (errs) {
+    console.error('Error loading textures:', errs)
+  }
+})
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="isLoading"
+      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading...
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas clear-color="#4f4f4f">
+    <Suspense>
+      <Environment preset="studio" background :blur="1" />
+    </Suspense>
+    <TresPerspectiveCamera :position="[2, 2, 4]" :look-at="[0, 2, 0]" />
+    <OrbitControls :target="[0, 2, 0]" />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="2" />
+    <TresGroup position-y="2">
+      <primitive v-if="cube" :object="cube" />
+    </TresGroup>
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/UseTextureDemo.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { OrbitControls, useTexture } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+
+const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'
+const { state: texture } = useTexture(path)
+</script>
+
+<template>
+  <TresCanvas clear-color="#FBB03B">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

docs/component-list/components.ts

@@ -52,6 +52,8 @@ export default [
       { text: 'useProgress', link: '/guide/loaders/use-progress' },
       { text: 'useGLTF', link: '/guide/loaders/use-gltf' },
       { text: 'GLTFModel', link: '/guide/loaders/gltf-model' },
+      { text: 'useTexture', link: '/guide/loaders/use-texture' },
+      { text: 'useTextures', link: '/guide/loaders/use-textures' },
       { text: 'useFBX', link: '/guide/loaders/use-fbx' },
       { text: 'FBXModel', link: '/guide/loaders/fbx-model' },
       { text: 'useVideoTexture', link: '/guide/loaders/use-video-texture' },

docs/guide/loaders/use-texture.md

@@ -0,0 +1,63 @@
+# useTexture
+
+<DocsDemo>
+  <UseTextureDemo />
+</DocsDemo>
+
+A composable that allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader) into your **TresJS** scene.
+
+## Usage
+
+```vue [TexturedObject.vue]
+<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. |
+
+## Component Usage
+
+```vue [UseTexture.vue]
+<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>
+```

docs/guide/loaders/use-textures.md

@@ -0,0 +1,136 @@
+# useTextures
+
+<DocsDemo>
+  <PBRTexturesDemo />
+</DocsDemo>
+
+A composable that allows you to load multiple textures at once using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader) into your **TresJS** scene.
+
+## Usage
+
+```vue [TexturedObjects.vue]
+<script setup lang="ts">
+import { useTextures } from '@tresjs/cientos'
+
+// Define an array of texture paths
+const texturePaths = [
+  '/textures/color.jpg',
+  '/textures/normal.jpg',
+  '/textures/roughness.jpg'
+]
+
+// Load all textures at once
+const { textures, isLoading, error } = useTextures(texturePaths)
+</script>
+
+<template>
+  <TresMesh>
+    <TresSphereGeometry />
+    <TresMeshStandardMaterial
+      :map="textures[0]"
+      :normal-map="textures[1]"
+      :roughness-map="textures[2]"
+    />
+  </TresMesh>
+</template>
+```
+
+## PBR Textures Example
+
+Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:
+
+```vue [PBRTextures.vue]
+<script setup lang="ts">
+import { TresCanvas, vLightHelper } from '@tresjs/core'
+import { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'
+import { MeshStandardMaterial } from 'three'
+
+// Load the 3D model
+const { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })
+const cube = computed(() => model.value?.nodes?.BlenderCube)
+const material = computed(() => model.value?.materials?.Material)
+
+// Define texture paths
+const texturePaths = [
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'
+]
+
+// Load all PBR textures at once
+const { textures, isLoading, error } = useTextures(texturePaths)
+
+// Apply textures to material when loaded
+watch([material, textures], ([modelMaterial, textures]) => {
+  if (modelMaterial && textures && textures.length === texturePaths.length) {
+    // Cast to MeshStandardMaterial to access PBR properties
+    const pbrMaterial = modelMaterial as MeshStandardMaterial
+
+    // Apply textures
+    pbrMaterial.map = textures[0]
+    pbrMaterial.normalMap = textures[1]
+    pbrMaterial.roughnessMap = textures[2]
+    pbrMaterial.metalnessMap = textures[3]
+    pbrMaterial.displacementMap = textures[4]
+
+    // Set material properties
+    pbrMaterial.displacementScale = 0
+    pbrMaterial.metalness = 0.8
+    pbrMaterial.roughness = 0.2
+  }
+})
+
+// Handle loading state and errors
+watch(isLoading, (_loading) => {
+  // Handle loading state
+})
+
+watch(error, (errs) => {
+  if (errs) {
+    console.error('Error loading textures:', errs)
+  }
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="#4f4f4f">
+    <Suspense>
+      <Environment preset="studio" background :blur="1" />
+    </Suspense>
+    <TresPerspectiveCamera :position="[8, 8, 8]" />
+    <OrbitControls />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="2" />
+    <TresDirectionalLight v-light-helper :position="[5, 5, 5]" :intensity="0.5" color="#ff0000" />
+    <TresDirectionalLight v-light-helper :position="[-5, 2, 2]" :intensity="0.5" color="#0000ff" />
+    <TresGroup position-y="2">
+      <primitive v-if="cube" :object="cube" />
+    </TresGroup>
+  </TresCanvas>
+</template>
+```
+
+## API
+
+### Parameters
+
+| Name            | Type      | Default     | Description                          |
+| :-------------- | --------- | ----------- | ------------------------------------ |
+| **paths**       | `string[]` | `undefined` | Array of paths to the textures. |
+
+### Returns
+
+| Name            | Type      | Description                          |
+| :-------------- | --------- | ------------------------------------ |
+| **textures**    | `Texture[]` | Array of loaded textures. |
+| **isLoading**   | `boolean` | Whether any textures are still loading. |
+| **error**       | `Error[] \| null` | Array of errors if any occurred during loading. |
+
+## Benefits
+
+- **Simplified API**: Load multiple textures with a single function call
+- **Consolidated loading state**: Track loading state for all textures at once
+- **Unified error handling**: Collect and report errors from all texture loads
+- **Type safety**: Proper TypeScript typing throughout the implementation

eslint.config.js

@@ -1,4 +1,8 @@
 import { tresLintConfig } from '@tresjs/eslint-config'
 
 export default tresLintConfig({
+  rules: {
+    // TODO: temporary fix for Error while loading rule 'jsonc/no-useless-escape': Cannot read properties of undefined (reading 'allowRegexCharacters')
+    'jsonc/no-useless-escape': 'off',
+  },
 })