chore: update @tresjs/cientos dependency to version 14afe95 and adjust ESLint auto-imports

- Updated the @tresjs/cientos dependency in package.json and pnpm-lock.yaml to the latest version (14afe95).
- Added Slot and Slots to ESLint auto-imports for improved type support in Vue components.
- Removed the Textures.vue component as it is no longer needed in the project.
- Simplified the Text3D component by using useLoader for font loading and updated the template to reflect the new structure.
- Cleaned up the basic routes by removing the reference to the deleted Textures.vue component.

package.json

@@ -77,7 +77,7 @@
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@tresjs/cientos": "https://pkg.pr.new/@tresjs/cientos@13943b0",
+    "@tresjs/cientos": "https://pkg.pr.new/@tresjs/cientos@14afe95",
     "@tresjs/eslint-config": "^1.4.0",
     "@types/three": "^0.173.0",
     "@typescript-eslint/eslint-plugin": "^8.23.0",

playground/vue/.eslintrc-auto-import.json

@@ -69,6 +69,8 @@
     "onWatcherCleanup": true,
     "useId": true,
     "useModel": true,
-    "useTemplateRef": true
+    "useTemplateRef": true,
+    "Slot": true,
+    "Slots": true
   }
 }

playground/vue/auto-imports.d.ts

@@ -66,6 +66,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

playground/vue/src/pages/basic/Textures.vue

@@ -1,23 +0,0 @@
-<script setup>
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas, UseTexture } from '@tresjs/core'
-
-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/misc/text3D/Text3D.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { extend, useTexture } from '@tresjs/core'
+import { extend, useLoader } from '@tresjs/core'
+import { useTexture } from '@tresjs/cientos'
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
+import { useControls } from '@tresjs/leches'
 
 const props = defineProps<{
   text: string
 }>()
 
+const text3DRef = shallowRef()
+
 extend({ TextGeometry })
 
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
@@ -22,26 +26,85 @@ const fontOptions = {
   bevelSegments: 4,
 }
 
-const loader = new FontLoader()
+const { state: font } = useLoader(FontLoader, fontPath)
 
-const font = await new Promise((resolve, reject) => {
-  try {
-    loader.load(fontPath, (font) => {
-      resolve(font)
-    })
-  }
-  catch (error) {
-    reject(console.error('cientos', error))
-  }
+const { state: matcapTexture } = useTexture('https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png')
+
+const { size, height, curveSegments, bevelEnabled, bevelThickness, bevelSize, bevelOffset, bevelSegments, needUpdates, center } = useControls({
+  needUpdates: true,
+  center: true,
+  size: {
+    value: 0.5,
+    min: 0.1,
+    max: 1,
+    step: 0.1,
+  },
+  height: {
+    value: 0.2,
+    min: 0.1,
+    max: 1,
+    step: 0.1,
+  },
+  curveSegments: {
+    value: 5,
+    min: 1,
+    max: 10,
+    step: 1,
+  },
+  bevelEnabled: true,
+  bevelThickness: {
+    value: 0.02,
+    min: 0,
+    max: 0.1,
+    step: 0.01,
+  },
+  bevelSize: {
+    value: 0.02,
+    min: 0,
+    max: 0.1,
+    step: 0.01,
+  },
+  bevelOffset: {
+    value: 0,
+    min: -0.1,
+    max: 0.1,
+    step: 0.01,
+  },
+  bevelSegments: {
+    value: 4,
+    min: 1,
+    max: 10,
+    step: 1,
+  },
 })
 
-const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+const textOptions = computed(() => ({
+  font: toValue(font),
+  size: toValue(size),
+  height: toValue(height),
+  curveSegments: toValue(curveSegments),
+  bevelEnabled: toValue(bevelEnabled),
+  bevelThickness: toValue(bevelThickness),
+  bevelSize: toValue(bevelSize),
+  bevelOffset: toValue(bevelOffset),
+  bevelSegments: toValue(bevelSegments),
+}))
+
+watchEffect(() => {
+  if (props.text && needUpdates.value && text3DRef.value) {
+    text3DRef.value.geometry.dispose()
+    text3DRef.value.geometry = new TextGeometry(props.text, textOptions.value)
+    if (center.value) {
+      text3DRef.value.geometry.center()
+    }
+  }
+})
 </script>
 
 <template>
-  <TresMesh>
+  <TresMesh v-if="font" ref="text3DRef">
     <TresTextGeometry
-      :args="[props.text, { font, ...fontOptions }]"
+      :args="[props.text, textOptions]"
       center
     />
     <TresMeshNormalMaterial :matcap="matcapTexture" />

playground/vue/src/pages/misc/text3D/index.vue

@@ -27,9 +27,7 @@ const { isVisible, text } = useControls({
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
-    <Suspense>
-      <Text3D v-if="isVisible" :text="text" />
-    </Suspense>
+    <Text3D v-if="isVisible" :text="text" />
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

playground/vue/src/router/routes/basic.ts

@@ -44,9 +44,4 @@ export const basicRoutes = [
     name: 'Pierced Props',
     component: () => import('../../pages/basic/PiercedProps.vue'),
   },
-  {
-    path: '/basic/textures',
-    name: 'Textures',
-    component: () => import('../../pages/basic/Textures.vue'),
-  },
 ]

pnpm-lock.yaml

@@ -25,8 +25,8 @@ importers:
         specifier: ^1.11.0
         version: 1.11.0
       '@tresjs/cientos':
-        specifier: https://pkg.pr.new/@tresjs/cientos@13943b0
-        version: https://pkg.pr.new/@tresjs/cientos@13943b0(@tresjs/core@5.0.0-next.0(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))(@types/three@0.173.0)(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+        specifier: https://pkg.pr.new/@tresjs/cientos@14afe95
+        version: https://pkg.pr.new/@tresjs/cientos@14afe95(@tresjs/core@5.0.0-next.0(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))(@types/three@0.173.0)(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       '@tresjs/eslint-config':
         specifier: ^1.4.0
         version: 1.4.0(@typescript-eslint/utils@8.24.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)
@@ -1659,9 +1659,9 @@ packages:
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
-  '@tresjs/cientos@https://pkg.pr.new/@tresjs/cientos@13943b0':
-    resolution: {tarball: https://pkg.pr.new/@tresjs/cientos@13943b0}
-    version: 4.2.0
+  '@tresjs/cientos@https://pkg.pr.new/@tresjs/cientos@14afe95':
+    resolution: {tarball: https://pkg.pr.new/@tresjs/cientos@14afe95}
+    version: 4.3.1
     peerDependencies:
       '@tresjs/core': '>=4.2.1'
       three: '>=0.133'
@@ -6952,7 +6952,7 @@ snapshots:
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
-  '@tresjs/cientos@https://pkg.pr.new/@tresjs/cientos@13943b0(@tresjs/core@5.0.0-next.0(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))(@types/three@0.173.0)(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
+  '@tresjs/cientos@https://pkg.pr.new/@tresjs/cientos@14afe95(@tresjs/core@5.0.0-next.0(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))(@types/three@0.173.0)(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@tresjs/core': 5.0.0-next.0(three@0.173.0)(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       '@vueuse/core': 12.8.2(typescript@5.7.3)