docs: added gltf loaders to cientos docs

docs/.vitepress/config.ts

@@ -58,14 +58,17 @@ export default defineConfig({
         collapsible: true,
         items: [
           { text: 'Introduction', link: '/cientos/' },
-          {
-            text: 'Composables',
-            link: '/cientos/composables',
-          },
           {
             text: 'Abstractions',
             items: [{ text: 'Text3D', link: '/cientos/abstractions/text-3d' }],
           },
+          {
+            text: 'Loaders',
+            items: [
+              { text: 'useGLTF', link: '/cientos/loaders/use-gltf' },
+              { text: 'GLTFModel', link: '/cientos/loaders/gltf-model' },
+            ],
+          },
         ],
       },
     ],

docs/cientos/loaders/gltf-model.md

@@ -0,0 +1,29 @@
+# Using `GLTFModel`
+
+The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
+
+```vue{2,10}
+<script setup lang="ts">
+import { OrbitControls, GLTFModel } from '@tresjs/cientos'
+</script>
+<template>
+  <Suspense>
+    <TresCanvas clear-color="#82DBC5" shadows alpha>
+      <TresPerspectiveCamera :position="[11, 11, 11]" />
+      <OrbitControls />
+      <TresScene>
+        <GLTFModel path="/models/AkuAku.gltf" draco />
+        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>
+```
+
+## Props
+
+| Prop          | Description                                                                                                           | Default     |
+| :------------ | :-------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `path`        | Path to the model file.                                                                                               | `undefined` |
+| `draco`       | Enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. | `false`     |
+| `decoderPath` | Path to a local Draco decoder.                                                                                        | `undefined` |

docs/cientos/loaders/use-gltf.md

@@ -0,0 +1,39 @@
+# useGLTF
+
+A composable that allows you to easily load glTF models into your **TresJS** scene.
+
+## Usage
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene } = await useGLTF('/models/AkuAku.gltf')
+```
+
+Then is as straightforward as adding the scene to your scene:
+
+```html{4}
+<Suspense>
+  <TresCanvas shadows alpha>
+    <TresScene>
+      <TresMesh v-bind="scene" />
+    </TresScene>
+  </TresCanvas>
+</Suspense>
+```
+
+An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+## Options
+
+| Name          | Type      | Default     | Description                          |
+| :------------ | --------- | ----------- | ------------------------------------ |
+| `path`        | `string`  | `undefined` | The path to the glTF model.          |
+| `draco`       | `boolean` | `false`     | Whether to enable Draco compression. |
+| `decoderPath` | `string`  | `undefined` | Local path to the Draco decoder.     |

packages/cientos/src/core/useGLTF/index.ts

@@ -1,5 +1,4 @@
 import { GLTFLoader, DRACOLoader } from 'three-stdlib'
-/* import { useLoader } from '../../../../tres/src/core' */
 import { useLoader } from '@tresjs/core'
 import { Object3D } from 'three'