docs: removed cientos and improve Readme

.gitignore

@@ -23,3 +23,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+.vitepress/dist
+.vitepress/cache

README.md

@@ -9,32 +9,59 @@
 
 Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. Think of it as a [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) or [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) but without the need of a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
 
-## Setup
+## Docs
+
+Checkout the [docs](https://tresjs.org)
+
+## Demos
+
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+
+## Contribution
+
+We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+
+
+### Setup
 
 ```
 pnpm install --shamefully-hoist
 ```
 
-## Dev
+### Playground
 
-To run the small playground without Histoire use
+To run the small playground
 
 ```
-pnpm run dev
+pnpm run playground
 ```
 
-## Histoire
+### Build lib
 
-All local demos will be inside [Histoire](https://histoire.dev/) stories.
+To build the core as library mode just use
 
 ```
-pnpm run story:dev
+pnpm run build
 ```
 
-## Build lib
+### Docs
 
-To build the core as library mode just use
+To run de docs in dev mode
 
+```bash
+pnpm run docs:dev
 ```
-pnpm run build
+
+To build them
+
+```bash
+pnpm run docs:build
 ```
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

docs/.vitepress/config.ts

@@ -60,61 +60,6 @@ export default defineConfig({
           },
         ],
       },
-      {
-        text: 'Cientos 💛',
-        collapsible: true,
-        items: [
-          { text: 'Introduction', link: '/cientos/' },
-          {
-            text: 'Abstractions',
-            items: [
-              { text: 'Text3D', link: '/cientos/abstractions/text-3d' },
-              { text: 'useAnimations', link: '/cientos/abstractions/use-animations' },
-              { text: 'Environment', link: '/cientos/abstractions/environment' },
-              { text: 'useEnvironment', link: '/cientos/abstractions/use-environment' },
-              { text: 'usePamMouse', link: '/cientos/abstractions/pam-camera-mouse' },
-            ],
-          },
-          {
-            text: 'Controls',
-            items: [
-              { text: 'OrbitControls', link: '/cientos/controls/orbit-controls' },
-              { text: 'TransformControls', link: '/cientos/controls/transform-controls' },
-            ],
-          },
-          {
-            text: 'Loaders',
-            items: [
-              { text: 'useGLTF', link: '/cientos/loaders/use-gltf' },
-              { text: 'GLTFModel', link: '/cientos/loaders/gltf-model' },
-              { text: 'useFBX', link: '/cientos/loaders/use-fbx' },
-              { text: 'FBXModel', link: '/cientos/loaders/fbx-model' },
-            ],
-          },
-          {
-            text: 'Shapes',
-            items: [
-              { text: 'Box', link: '/cientos/shapes/box' },
-              { text: 'Circle', link: '/cientos/shapes/circle' },
-              { text: 'Cone', link: '/cientos/shapes/cone' },
-              { text: 'Dodecahedron', link: '/cientos/shapes/dodecahedron' },
-              { text: 'Icosahedron', link: '/cientos/shapes/icosahedron' },
-              { text: 'Octahedron', link: '/cientos/shapes/octahedron' },
-              { text: 'Plane', link: '/cientos/shapes/plane' },
-              { text: 'Ring', link: '/cientos/shapes/ring' },
-              { text: 'Sphere', link: '/cientos/shapes/sphere' },
-              { text: 'Tetrahedron', link: '/cientos/shapes/tetrahedron' },
-              { text: 'Torus', link: '/cientos/shapes/torus' },
-              { text: 'TorusKnot', link: '/cientos/shapes/torus-knot' },
-              { text: 'Tube', link: '/cientos/shapes/tube' },
-            ],
-          },
-          {
-            text: 'Misc',
-            items: [{ text: 'useTweakpane', link: '/cientos/misc/use-tweakpane' }],
-          },
-        ],
-      },
     ],
     nav: [
       { text: 'Guide', link: '/guide/' },
@@ -149,6 +94,7 @@ export default defineConfig({
     socialLinks: [
       /*  { icon: 'github', link: 'https://github.com/tresjs/tres' }, */
       { icon: 'twitter', link: 'https://twitter.com/alvarosabu' },
+      { icon: 'discord', link: 'https://discord.gg/wXx63MwW'}
     ],
   },
   vite: {

docs/cientos/abstractions/environment.md

@@ -1,67 +0,0 @@
-# Environment
-
-![Environment](/cientos/environment.png)
-
-Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`,
-
-It uses the composable [useEnvironment](/cientos/abstractions/use-environment) under the hood to load the cubemap.
-
-## Usage
-
-```html
-<Environment
-  :files="[
-    '/px.jpg',
-    '/nx.jpg',
-    '/py.jpg',
-    '/ny.jpg',
-    '/pz.jpg',
-    '/nz.jpg'
-]"
-/>
-```
-
-You can also pass the `.hdr` file directly:
-
-```html
-<Environment files="/sunset.hdr" />
-```
-
-![Environment](/cientos/envmaps.png)
-
-## Texture reference
-
-You can access the model reference by pasing a `ref` to the `<Environment />` prop and then using the method `getTexture()` to get the object.
-
-```vue{4,6,9,14,17}
-<script setup lang="ts">
-import { Environment } from '@tresjs/cientos'
-
-let envMap = null
-
-const environmentTexture = shallowRef()
-
-watch(environmentTexture, ({ getTexture }) => {
-  envMap = getTexture()
-})
-</script>
-
-<template>
-  <Environment ref="environmentTexture" />
-  <TresMesh>
-    <TresSphereGeometry />
-    <TresMeshStandardMaterial :env-map="envMap" />
-  </TresMesh>
-</template>
-```
-
-## Props
-
-| Prop         | Description                                                          | Default                                                                        |
-| :----------- | :------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `files`      | Array of 6 urls to images, one for each side of the CubeTexture.     | `undefined`                                                                    |
-| `path`       | Path to the environment map files.                                   | `undefined`                                                                    |
-| `encoding`   | Encoding of the environment map.                                     | `sRGBEncoding` for an array of files and `LinearEncoding` for a single texture |
-| `background` | If `true`, the environment map will be used as the scene background. | `false`                                                                        |
-| `blur`       | Blur factor between 0 and 1. (only works with three 0.146 and up)    | 0                                                                              |
-| `preset`     | Preset environment map.                                              | `undefined`                                                                    |

docs/cientos/abstractions/pam-camera-mouse.md

@@ -1,31 +0,0 @@
-# PamCameraMouse
-
-![](/cientos/PamCameraMouse.gif)
-
-`<PamCameraMouse />` is a component that allow you to create easily the pam mouse camera effect. The camera will update automatically according to the mouse position, creating a beautiful nice effect
-
-## Usage
-
-You only need import it and use it `<PamCameraMouse />` additionally you can pass two props, disabled and factor. Factor is a number to increase the movement range of the camera
-
-```vue
-<template>
-  <TresCanvas>
-    <PamCameraMouse />
-    <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-      <TresMeshNormalMaterial />
-    </Text3D>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-By the nature of the pam mouse camera effect it creates conflicts if it's used in combination with OrbitControls
-:::
-
-## Props [[1]](#1)
-
-| Prop         | Description                                             | Default |
-| :----------- | :------------------------------------------------------ | ------- |
-| **disabled** | enable or disabled the effect, boolean                  | false   |
-| **factor**   | Number use to increase the range of the camera movement | 5       |

docs/cientos/abstractions/text-3d.md

@@ -1,52 +0,0 @@
-# Text3D
-
-`<Text3D />` is a component that renders a 3D text. It is a wrapper around the [TextGeometry](https://threejs.org/docs/#api/en/geometries/TextGeometry) class.
-
-<StackBlitzEmbed projectId="tresjs-text3d-cientos" />
-
-## Usage
-
-To use the `<Text3D />` component you need to pass the `font` prop with the URL of the font JSON file you want to use. TextGeometry uses `typeface`.json generated fonts, you can generate yours [here](http://gero3.github.io/facetype.js/)
-
-```vue
-<template>
-  <TresCanvas>
-    <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-      <TresMeshNormalMaterial />
-    </Text3D>
-  </TresCanvas>
-</template>
-```
-
-Notice that you need to pass the `<TresMeshNormalMaterial />` component as a child of the `<Text3D />` component. This is because `<Text3D />` is a `Mesh` component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:
-
-```vue
-<template>
-  <TresCanvas>
-    <Text3D font="/fonts/FiraCodeRegular.json">
-      TresJS
-      <TresMeshNormalMaterial />
-    </Text3D>
-  </TresCanvas>
-</template>
-```
-
-## Props [[1]](#1)
-
-| Prop               | Description                                                            | Default |
-| :----------------- | :--------------------------------------------------------------------- | ------- |
-| **font**           | The font data or font name to use for the text.                        |         |
-| **text**           | The text to display.                                                   |         |
-| **size**           | The size of the text.                                                  | 0.5     |
-| **height**         | The height of the text.                                                | 0.2     |
-| **curveSegments**  | The number of curve segments to use when generating the text geometry. | 5       |
-| **bevelEnabled**   | A flag indicating whether beveling should be enabled for the text.     | true    |
-| **bevelThickness** | The thickness of the beveled edge on the text.                         | 0.05    |
-| **bevelSize**      | The size of the beveled edge on the text.                              | 0.02    |
-| **bevelOffset**    | The offset of the beveled edge on the text.                            | 0       |
-| **bevelSegments**  | The number of bevel segments to use when generating the text geometry. | 4       |
-
-## References
-
-<a id="1">[1]</a>
-This table was generated by [ChatGPT](https://chat.openai.com/chat) based on the Vue component props.

docs/cientos/abstractions/use-animations.md

@@ -1,21 +0,0 @@
-# useAnimations
-
-`useAnimation` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
-
-<StackBlitzEmbed projectId="tresjs-use-animations" />
-
-## Usage
-
-```ts
-import { useAnimations } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny.gltf')
-
-// Animations [ { name: 'Greeting'}, { name: 'Idle' } ]
-
-const { actions, mixer } = useAnimations(animations, model)
-
-let currentAction = actions.Greeting
-
-currentAction.play()
-```

docs/cientos/abstractions/use-environment.md

@@ -1,44 +0,0 @@
-# UseEnvironment <Badge type="warning" text="^1.7.0" />
-
-`useEnvironment` composable that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`.
-
-It uses the [CubeTextureLoader](https://threejs.org/docs/#api/en/loaders/CubeTextureLoader) to load the cubemap
-
-## Usage
-
-```ts
-import { useEnvironment } from '@tresjs/cientos'
-
-const texture = await useEnvironment({
-  files: [
-    '/textures/environmentMaps/0/px.jpg',
-    '/textures/environmentMaps/0/nx.jpg',
-    '/textures/environmentMaps/0/py.jpg',
-    '/textures/environmentMaps/0/ny.jpg',
-    '/textures/environmentMaps/0/pz.jpg',
-    '/textures/environmentMaps/0/nz.jpg',
-  ],
-  path: '',
-  encoding: sRGBEncoding,
-})
-```
-
-Then you can use the `texture` in your scene:
-
-```html{3}
-<TresMesh>
-    <TresSphereGeometry />
-    <TresMeshStandardMaterial :map="texture" />
-</TresMesh>
-```
-
-## Options
-
-| Name           | Type       | Default                                                                        | Description                                                       |
-| :------------- | ---------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
-| **files**      | `Array`    | `undefined`                                                                    | Array of 6 urls to images, one for each side of the CubeTexture.  |
-| **path**       | `boolean`  | `false`                                                                        | Path to the environment map files.                                |
-| **encoding**   | `Encoding` | `sRGBEncoding` for an array of files and `LinearEncoding` for a single texture | Encoding of the environment map.                                  |
-| **background** | `boolean`  | `false`                                                                        | If `true` the texture will be used as the scene background.       |
-| **blur**       | `number`   | `0`                                                                            | Blur factor between 0 and 1. (only works with three 0.146 and up) |
-| **preset**     | `string`   | `undefined`                                                                    | Preset environment map.                                           |

docs/cientos/controls/orbit-controls.md

@@ -1,30 +0,0 @@
-# OrbitControls
-
-[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
-
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/OrbitControls` module.
-
-Here is where the fancy part begins. ✨  
-The `cientos` package provides a component called `<OrbitControls />` that is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
-
-The nicest part? You don't need to extend the catalog or pass any arguments.  
-It just works. 💯
-
-```vue{3}
-<template>
-  <TresCanvas shadows alpha>
-    <OrbitControls />
-
-  </TresCanvas>
-</template>
-```
-
-## Props
-
-| Prop              | Description                                                                                                      | Default     |
-| :---------------- | :--------------------------------------------------------------------------------------------------------------- | ----------- |
-| **makeDefault**   | If `true`, the controls will be set as the default controls for the scene.                                       | `false`     |
-| **camera**        | The camera to control.                                                                                           | `undefined` |
-| **domElement**    | The dom element to listen to.                                                                                    | `undefined` |
-| **target**        | The target to orbit around.                                                                                      | `undefined` |
-| **enableDamping** | If `true`, the controls will use damping (inertia), which can be used to give a sense of weight to the controls. | `false`     |

docs/cientos/controls/transform-controls.md

@@ -1,99 +0,0 @@
-# Transform Controls
-
-The [Transform Controls](https://threejs.org/docs/#examples/en/controls/TransformControls) are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender
-
-<StackBlitzEmbed projectId="tresjs-transform-controls" />
-
-## Usage
-
-To use the Transform Controls, simply add the `TransformControls` component to your scene. You can pass the `templateRef`of the instance you want to control as a prop.
-
-```vue{2,6,8}
-<script setup>
-const boxRef = shallowRef()
-</script>
-<template>
-  <TresCanvas>
-    <OrbitControls make-default />
-      <TransformControls :object="boxRef" />
-      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-          <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-          <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-If you are using other controls ([OrbitControls](/cientos/controls/orbit-controls)) they will interfere with each other when dragging. To avoid this, you can set the `makeDefault` prop to `true` on the **OrbitControls**.
-:::
-
-## Modes
-
-The Transform Controls can be used in three different modes:
-
-### Translate
-
-![Translate](/cientos/transform-controls-translate.png)
-
-The default mode allows you to move the object around the scene.
-
-```html
-<TransformControls mode="translate" :object="sphereRef" />
-```
-
-### Rotate
-
-![Rotate](/cientos/transform-controls-rotate.png)
-
-The rotate mode allows you to rotate the object around the scene.
-
-```html
-<TransformControls mode="rotate" :object="boxRef" />
-```
-
-### Scale
-
-![Scale](/cientos/transform-controls-scale.png)
-
-The scale mode allows you to scale the object around the scene.
-
-```html
-<TransformControls mode="scale" :object="sphereRef" />
-```
-
-## Props
-
-| Prop                | Description                                                                                   | Default     |
-| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
-|  **object**         | The instance [Object3D](https://threejs.org/docs/index.html#api/en/core/Object3D) to control. | `null`      |
-| **mode**            | The mode of the controls. Can be `translate`, `rotate` or `scale`.                            | `translate` |
-| **enabled**         | If `true`, the controls will be enabled.                                                      | `true`      |
-| **axis**            | The axis to use for the controls. Can be `X`, `Y`, `Z`, `XY`, `YZ`, `XZ`, `XYZ`.              | `XYZ`       |
-| **space**           | The space to use for the controls. Can be `local` or `world`.                                 | `local`     |
-| **size**            | The size of the controls.                                                                     | `1`         |
-| **translationSnap** | The distance to snap to when translating. (World units)                                       | `null`      |
-| **rotationSnap**    | The angle to snap to when rotating. (Radians)                                                 | `null`      |
-| **scaleSnap**       | The scale to snap to when scaling.                                                            | `null`      |
-| **showX**           | If `true`, the X-axis helper will be shown.                                                   | `true`      |
-| **showY**           | If `true`, the Y-axis helper will be shown.                                                   | `true`      |
-| **showZ**           | If `true`, the Z-axis helper will be shown.                                                   | `true`      |
-
-## Events
-
-| Event            | Description                                                    |
-| :--------------- | :------------------------------------------------------------- |
-| **dragging**     | Fired when the user starts or stops dragging the controls.     |
-| **change**       | Fired when the user changes the controls.                      |
-| **mouseDown**    | Fired when the user clicks on the controls.                    |
-| **mouseUp**      | Fired when the user releases the mouse button on the controls. |
-| **objectChange** | Fired when the user changes the object.                        |
-
-<style scoped>
-img {
-    aspect-ratio: 16/9;
-    object-fit: cover;
-    object-position: top;
-    border-radius: 8px;
-}
-</style>

docs/cientos/index.md

@@ -1,39 +0,0 @@
-# Cientos <Badge text="alpha" type="warning" />
-
-![Cientos banner](/cientos-banner.png)
-
-> Cientos (Spanish word for "hundreds", pronounced `/θjentos/` ) is is a collection of useful ready-to-go helpers and components that are not part of the [core](/guide/index.md) package. The name uses the word uses in spanish to multiply by 100, to refer to the potential reach of the package to hold a amazing abstractions.
-
-The `cientos` package uses [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module under the hood instead of the `three/examples/jsm` module. This means that you don't need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#useCatalogue) composable, `cientos` does it for you.
-
-It just works. 💯
-
-::: info
-This package is not required to use the core library, but they can make your DX way better, specially for complex scenes.
-:::
-
-## Installation
-
-```bash
-npm install @tresjs/cientos@alpha -D
-```
-
-## Basic Usage
-
-```ts
-import { OrbitControls } from '@tresjs/cientos'
-```
-
-Now you can use the `OrbitControls` component in your scene.
-
-```html
-<template>
-  <TresCanvas shadows alpha>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-::: warning
-Notice that you don't need to write the prefix `Tres` such as `<TresOrbitControl />` to use the component
-:::

docs/cientos/loaders/fbx-model.md

@@ -1,25 +0,0 @@
-# Using `FBXModel`
-
-The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, FBXModel } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <Suspense>
-        <FBXModel path="/models/AkuAku.fbx" />
-      </Suspense>
-      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresCanvas>
-</template>
-```
-
-## Props
-
-| Prop   | Description             | Default     |
-| :----- | :---------------------- | ----------- |
-| `path` | Path to the model file. | `undefined` |

docs/cientos/loaders/gltf-model.md

@@ -1,48 +0,0 @@
-# Using `GLTFModel`
-
-The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <Suspense>
-        <GLTFModel path="/models/AkuAku.gltf" draco />
-      </Suspense>
-      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresCanvas>
-</template>
-```
-
-## Model reference
-
-You can access the model reference by pasing a `ref` to the `model` prop and then using the method `getModel()` to get the object.
-
-```vue{3,6}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-
-const modelRef = shallowRef<THREE.Object3D>()
-
-watch(modelRef, ({model}) => {
-  model.traverse((child) => {
-    if (child.isMesh) {
-      child.castShadow = true
-      child.receiveShadow = true
-    }
-  })
-})
-</script>
-```
-
-## 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-fbx.md

@@ -1,21 +0,0 @@
-# useFBX
-
-A composable that allows you to easily load glTF models into your **TresJS** scene.
-
-## Usage
-
-```ts
-import { useFBX } from '@tresjs/cientos'
-
-const model = await useFBX('/models/AkuAku.fbx')
-```
-
-Then is as straightforward as adding the scene to your scene:
-
-```html{3}
-<TresCanvas shadows alpha>
-  <Suspense>
-    <TresMesh v-bind="scene" />
-  </Suspense>
-</TresCanvas>
-```

docs/cientos/loaders/use-gltf.md

@@ -1,36 +0,0 @@
-# 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{3}
-<TresCanvas shadows alpha>
-  <Suspense>
-    <TresMesh v-bind="scene" />
-  </Suspense>
-</TresCanvas>
-```
-
-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                          |
-| :-------------- | --------- | ----------- | ------------------------------------ |
-| **draco**       | `boolean` | `false`     | Whether to enable Draco compression. |
-| **decoderPath** | `string`  | `undefined` | Local path to the Draco decoder.     |

docs/cientos/misc/use-tweakpane.md

@@ -1,40 +0,0 @@
-# useTweakPane
-
-[TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications.
-
-**TresJS** provides a composables called `useTweakPane` that creates a Tweakpane panel to your container so you can add tweaks to it. By default, the panel is created on the top right corner of the canvas and includes a FPS graph monitor to keep and eye on the performance of your scene.
-
-::: info
-You can change the container of the panel by passing the `selector` option to the `useTweakPane` function.
-:::
-
-## Basic usage
-
-```ts
-import { useTweakPane } from '@tresjs/cientos'
-
-const { pane } = useTweakPane()
-
-const experiment = reactive({
-  clearColor: '#000000',
-  alpha: true,
-  shadow: true,
-})
-
-pane.addInput(experiment, 'clearColor', {
-  label: 'Clear Color',
-  colorMode: 'hex',
-})
-
-pane.addInput(experiment, 'alpha')
-```
-
-The result will be something like this:
-
-![](/use-tweakpane.png)
-
-## Options
-
-| Name         | Type     | Default     | Description                                                    |
-| :----------- | -------- | ----------- | -------------------------------------------------------------- |
-| **selector** | `string` | `undefined` | The selector of the container where the panel will be created. |

docs/cientos/shapes/box.md

@@ -1,29 +0,0 @@
-# Box <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/box.png)
-
-The `cientos` package provides a `<Box />` component that serves as a short-cut for a `BoxGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  width: number,
-  height: number,
-  depth: number,
-  widthSegments: number,
-  heightSegments: number,
-  depthSegments: number
-]
-```
-
-Reference: [BoxGeometry](https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry)
-
-## Usage
-
-```html
-<Box :args="[1, 1, 1]" color="orange" />
-
-// Box with a custom material transformations
-<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="orange" />
-</Box>
-```

docs/cientos/shapes/circle.md

@@ -1,22 +0,0 @@
-# Circle <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/circle.png)
-
-The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, segments: number, thetaStart: number, thetaLength: number]
-```
-
-Reference: [CircleGeometry](https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry)
-
-## Usage
-
-```html
-<Circle :args="[1, 32]" color="lightsalmon" />
-
-// Circle with a custom material transformations
-<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
-  <TresMeshToonMaterial color="lightsalmon" />
-</Circle>
-```

docs/cientos/shapes/cone.md

@@ -1,30 +0,0 @@
-# Cone <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/cone.png)
-
-The `cientos` package provides a `<Cone />` component that serves as a short-cut for a `ConeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  height: number,
-  radialSegments: number,
-  heightSegments: number,
-  openEnded: boolean,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [ConeGeometry](https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry)
-
-## Usage
-
-```html
-<Cone :args="[1, 1, 8]" color="orange" />
-
-// Cone with a custom material transformations
-<Cone ref="coneRef" :args="[1, 1, 8]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="orange" />
-</Cone>
-```

docs/cientos/shapes/dodecahedron.md

@@ -1,22 +0,0 @@
-# Dodecahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/dodecahedron.png)
-
-The `cientos` package provides a `<Dodecahedron />` component that serves as a short-cut for a `DodecahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [DodecahedronGeometry](https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry)
-
-## Usage
-
-```html
-<Dodecahedron :args="[1, 0]" color="deeppink" />
-
-// Dodecahedron with a custom material transformations
-<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="deeppink" />
-</Dodecahedron>
-```

docs/cientos/shapes/icosahedron.md

@@ -1,22 +0,0 @@
-# Icosahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/icosahedron.png)
-
-The `cientos` package provides a `<Icosahedron />` component that serves as a short-cut for a `IcosahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [IcosahedronGeometry](https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry)
-
-## Usage
-
-```html
-<Icosahedron :args="[1, 0]" color="red" />
-
-// Icosahedron with a custom material transformations
-<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="red" />
-</Icosahedron>
-```

docs/cientos/shapes/octahedron.md

@@ -1,22 +0,0 @@
-# Octahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/octahedron.png)
-
-The `cientos` package provides a `<Octahedron />` component that serves as a short-cut for a `OctahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [OctahedronGeometry](https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry)
-
-## Usage
-
-```html
-<Octahedron :args="[1, 0]" color="red" />
-
-// Octahedron with a custom material transformations
-<Octahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="red" />
-</Octahedron>
-```

docs/cientos/shapes/plane.md

@@ -1,26 +0,0 @@
-# Plane <Badge type="warning" text="^1.5.0" />
-
-![](/cientos/plane.png)
-
-The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [width: number, height: number, widthSegments: number, heightSegments: number]
-```
-
-Reference: [PlaneGeometry](https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry)
-
-::: info
-A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
-:::
-
-## Usage
-
-```html
-<Plane :args="[1, 1]" color="teal" />
-
-// Plane with a custom material transformations
-<Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="teal" />
-</Plane>
-```

docs/cientos/shapes/ring.md

@@ -1,29 +0,0 @@
-# Ring <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/ring.png)
-
-The `cientos` package provides a `<Ring />` component that serves as a short-cut for a `RingGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  innerRadius: number,
-  outerRadius: number,
-  thetaSegments: number,
-  phiSegments: number,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [RingGeometry](https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry)
-
-## Usage
-
-```html
-<Ring :args="[0.5, 1, 32]" color="purple" />
-
-// Ring with a custom material transformations
-<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="purple" />
-</Ring>
-```

docs/cientos/shapes/sphere.md

@@ -1,30 +0,0 @@
-# Sphere <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/sphere.png)
-
-The `cientos` package provides a `<Sphere />` component that serves as a short-cut for a `SphereGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  widthSegments: number,
-  heightSegments: number,
-  phiStart: number,
-  phiLength: number,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [SphereGeometry](https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry)
-
-## Usage
-
-```html
-<Sphere :args="[1, 1, 1]" color="pink" />
-
-// Sphere with a custom material transformations
-<Sphere ref="planeRef" :args="[1, 1, 1]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="pink" />
-</Sphere>
-```

docs/cientos/shapes/tetrahedron.md

@@ -1,22 +0,0 @@
-# Tetrahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/tetrahedron.png)
-
-The `cientos` package provides a `<Tetrahedron />` component that serves as a short-cut for a `TetrahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [TetrahedronGeometry](https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry)
-
-## Usage
-
-```html
-<Tetrahedron :args="[1, 0]" color="yellow" />
-
-// Tetrahedron with a custom material transformations
-<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="yellow" />
-</Tetrahedron>
-```

docs/cientos/shapes/torus-knot.md

@@ -1,29 +0,0 @@
-# TorusKnot <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/torus-knot.png)
-
-The `cientos` package provides a `<TorusKnot />` component that serves as a short-cut for a `TorusKnotGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  tube: number,
-  tubularSegments: number,
-  radialSegments: number,
-  p: number,
-  q: number
-]
-```
-
-Reference: [TorusKnotGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry)
-
-## Usage
-
-```html
-<TorusKnot :args="[0.6, 0.2, 64, 8]" color="lime" />
-
-// TorusKnot with a custom material transformations
-<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]">
-  <TresMeshToonMaterial color="lime" />
-</TorusKnot>
-```

docs/cientos/shapes/torus.md

@@ -1,28 +0,0 @@
-# Torus <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/torus.png)
-
-The `cientos` package provides a `<Torus />` component that serves as a short-cut for a `TorusGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  tube: number,
-  radialSegments: number,
-  tubularSegments: number,
-  arc: number
-]
-```
-
-Reference: [TorusGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry)
-
-## Usage
-
-```html
-<Torus :args="[2, 0.4, 42, 100]" color="cyan" />
-
-// Torus with a custom material transformations
-<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">
-  <TresMeshToonMaterial color="cyan" />
-</Torus>
-```

docs/cientos/shapes/tube.md

@@ -1,50 +0,0 @@
-# Tube <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/tube.png)
-
-The `cientos` package provides a `<Tube />` component that serves as a short-cut for a `TubeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-<script>
-export default {
-  setup() {
-    const tubePath = ref(new CubicBezierCurve3(
-          new Vector3(-1, 0, 0),
-          new Vector3(-0.5, -1, 0),
-          new Vector3(0.5, 1, 0),
-          new Vector3(1, 0, 0),
-          ));
-
-    return {
-      tubePath
-    }
-  },
-}
-</script>
-```
-
-```typescript
-type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
-
-args: [
-  path: CurveType,
-  tubularSegments: number,
-  radius: number,
-  radialSegments: number,
-  closed: boolean
-]
-```
-
-Reference: [TubeGeometry](https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry)
-
-## Usage
-
-```html
-// TubeGeometry needs a curve path to be construct
-<Tube :args="[tubePath, 20, 0.2, 8, false]" color="lightblue" />
-
-// Tube with a custom material transformations
-<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="lightblue" />
-</Tube>
-```