docs: cientos package and Text3D

README.md

@@ -13,10 +13,10 @@ Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating Three
 
 ## Packages
 
-| Package                     | Version (click for changelogs)                                                                               |
-| --------------------------- | :----------------------------------------------------------------------------------------------------------- |
-| [Tres](packages/tres)       | [![tres version](https://img.shields.io/npm/v/@tresjs/core.svg?label=%20)](packages/tres/CHANGELOG.md)       |
-| [Cientos](packages/cientos) | [![tres version](https://img.shields.io/npm/v/@tresjs/cientos.svg?label=%20)](packages/cientos/CHANGELOG.md) |
+| Package                     | Version (click for changelogs)                                                                                  |
+| --------------------------- | :-------------------------------------------------------------------------------------------------------------- |
+| [Tres](packages/tres)       | [![tres version](https://img.shields.io/npm/v/@tresjs/core.svg?label=%20)](packages/tres/CHANGELOG.md)          |
+| [Cientos](packages/cientos) | [![cientos version](https://img.shields.io/npm/v/@tresjs/cientos.svg?label=%20)](packages/cientos/CHANGELOG.md) |
 
 ## Docs
 

docs/.vitepress/config.ts

@@ -38,9 +38,23 @@ export default defineConfig({
       },
       {
         text: 'Advanced',
-
         items: [{ text: 'Extending', link: '/advanced/extending' }],
       },
+      {
+        text: 'Cientos',
+        collapsible: true,
+        items: [
+          { text: 'Introduction', link: '/cientos/' },
+          {
+            text: 'Composables',
+            link: '/cientos/composables',
+          },
+          {
+            text: 'Abstractions',
+            items: [{ text: 'Text3D', link: '/cientos/abstractions/text-3d' }],
+          },
+        ],
+      },
     ],
     nav: [
       { text: 'Guide', link: '/guide/' },

docs/api/instances-arguments-and-props.md

@@ -73,7 +73,7 @@ This is the same as doing this:
 const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
 ```
 
-## rops
+## Props
 
 You can also pass props to the component, for example, the `TresAmbientLight` has a `intensity` property, so you can pass it to the component like this:
 

docs/api/renderer.md

@@ -16,7 +16,7 @@ The `Renderer` component is the main component of Tres. It's the one that create
 ## Props
 
 | Prop                        | Description                                                                                                                                                     | Default            |
-| --------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
 | **shadows**                 | Enable shadows in the Renderer                                                                                                                                  | `false`            |
 | **shadowMapType**           | Set the shadow map type                                                                                                                                         | `PCFSoftShadowMap` |
 | **physicallyCorrectLights** | Whether to use physically correct lighting mode. See the [lights / physical example](https://threejs.org/examples/#webgl_lights_physical).                      | `false`            |

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

@@ -0,0 +1,56 @@
+# 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>
+    <TresScene>
+      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </TresScene>
+  </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>
+    <TresScene>
+      <Text3D font="/fonts/FiraCodeRegular.json">
+        TresJS
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </TresScene>
+  </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/index.md

@@ -0,0 +1,44 @@
+<script setup>
+    import cientos from '../../packages/cientos/package.json'
+</script>
+
+# Cientos <Badge :text="`v${cientos.version}`" type="warning" vertical="middle" />
+
+![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](/docs/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](/composables/use-catalog) 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 -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 />
+    <TresScene> ... </TresScene>
+  </TresCanvas>
+</template>
+```
+
+::: warning
+Notice that you don't need to write the prefix `Tres` such as `<TresOrbitControl />` to use the component
+:::

docs/guide/index.md

@@ -1,5 +1,7 @@
 # Introduction
 
+> Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative way.
+
 <FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
 
 ```

packages/tres/src/App.vue

@@ -1,39 +1,30 @@
 <script setup lang="ts">
-/* import { Color } from 'three' */
-/* import { useTweakPane, OrbitControls } from '../../cientos/src' */
-import { useTweakPane, OrbitControls } from '@tresjs/cientos'
-/* import TestSphere from '/@/components/TestSphere.vue' */
-/* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-import { useTres, useCatalogue } from '/@/core' */
+/* import { useTexture } from '@tresjs/core' */
+import { OrbitControls, Text3D } from '@tresjs/cientos'
 
-/* const { extend } = useCatalogue() */
-
-/* extend({ OrbitControls }) */
-
-useTweakPane()
-
-/* const { state } = useTres() */
+/* const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+ */
 </script>
+
 <template>
   <Suspense>
     <TresCanvas
+      clear-color="#82DBC5"
       shadows
       alpha
-      clear-color="teal"
+      window-size
       power-preference="high-performance"
       preserve-drawing-buffer
       physically-correct-lights
     >
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+      <OrbitControls />
+      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
       <TresScene>
-        <OrbitControls />
-        <TresAmbientLight :intensity="0.5" />
-        <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
-        <TresMesh :position="[0, 0, 0]">
-          <TresBoxGeometry />
+        <Text3D font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json">
+          TresJS
           <TresMeshNormalMaterial />
-        </TresMesh>
-        <TresAxesHelper :args="[1]" :visible="false" />
+        </Text3D>
+        <TresAxesHelper :args="[1]" />
         <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
       </TresScene>
     </TresCanvas>