docs: fixed typos and small enhancements in en docs, fixed dead links in de #567 (#566)

* chore: corrected typos and changed docs in index and your first scene markdowns

* chore: update docs

caveats, composables, devtools, migration guide and troubleshooting pages

* docs: update english docs and descriptions in api and directive sections

* chore: corrected typos and changed docs in index and your first scene markdowns

* chore: update docs

caveats, composables, devtools, migration guide and troubleshooting pages

* docs: update english docs and descriptions in api and directive sections

* fix: fix url to upper case also in other languages to be aligned

* fix: fixed dead link in all 3 languages

* fix: address comment for formatting mismatch

* fix: addressed remaining pr comments

* fix: removed last double quoted

* chore: resolve merge conflicts

* chore: resolve merge conflicts

* fix: update broken lockfile

* fix: fix dead links

* docs: same wording for getting started and index page

docs/.vitepress/config/en.ts

@@ -43,7 +43,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
 
         items: [
           { text: 'Extending', link: '/advanced/extending' },
-          { text: 'primitive', link: '/advanced/primitive' },
+          { text: 'Primitive', link: '/advanced/primitive' },
           {
             text: 'Caveats',
             link: '/advanced/caveats',

docs/.vitepress/config/es.ts

@@ -43,7 +43,7 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
 
         items: [
           { text: 'Extender', link: '/es/advanced/extending' },
-          { text: 'primitive', link: '/es/advanced/primitive' },
+          { text: 'Primitive', link: '/es/advanced/primitive' },
           {
             text: 'Advertencias',
             link: '/es/advanced/caveats',

docs/advanced/caveats.md

@@ -36,13 +36,13 @@ onLoop(({ _delta, elapsed }) => {
 </template>
 ```
 
-If you make a change on the `color` of the `TresMeshStandardMaterial` component, you will see that the change is applied but the rotation is not working anymore. This is because the instance is disposed and created again.
+If you change the `color` attribute of the `TresMeshStandardMaterial` component, you will see that the change is applied but the rotation is not working anymore. This is because the instance is disposed and created again.
 
 :::tip
-So as **rule of thumb** you should reload the page whenever you don't see the changes you made.
+So as **rule of thumb** you should reload the page whenever you don't see your changes reflected.
 :::
 
-That being said we are working on a better solution for this 😁. If you have any idea how to solve this, please let us know.
+That being said we are working on a better solution for this 😁. If you have any idea on how to solve this, please let us know.
 
 You can follow the discussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
 
@@ -52,7 +52,7 @@ We all love reactivity 💚. It is one of the most powerful features of VueJS. H
 
 Vue reactivity is based on [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.
 
-Since we are rendering an scene and updating it in every frame (60FPS), that means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update the that objectthat many times. This is not a good idea 😅 and will be detrimental for performance.
+Since we are rendering a scene and updating it in every frame, for example with a rate of 60FPS this means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update set object 60 times. This is not a good idea 😅 and will be detrimental for performance.
 
 Here is a benchmark of the difference between using a Proxy object and a plain object.
 

docs/api/composables.md

@@ -222,15 +222,15 @@ const context = useTresContext()
 ### Properties of context
 | Property | Description |
 | --- | --- |
-| **camera** | the currently active camera |
-| **cameras** | the cameras that exist in the scene |
-| **controls** | the controls of your scene |
-| **deregisterCamera** | a method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
+| **camera** | The currently active camera |
+| **cameras** | The cameras that exist in the scene |
+| **controls** | The controls of your scene |
+| **deregisterCamera** | A method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
 | **extend** | Extends the component catalogue. See [extending](/advanced/extending) |
-| **raycaster** | the global raycaster used for pointer events |
-| **registerCamera** | a method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
-| **renderer** | the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene |
-| **scene** | the [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
-| **setCameraActive** | a method to set a camera active |
-| **sizes** | contains width, height and aspect ratio of your canvas |
+| **raycaster** | The global raycaster used for pointer events |
+| **registerCamera** | A method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
+| **renderer** | The [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene |
+| **scene** | The [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
+| **setCameraActive** | A method to set a camera active |
+| **sizes** | Contains width, height and aspect ratio of your canvas |
 

docs/api/tres-canvas.md

@@ -45,7 +45,7 @@ Tres comes with a few presets for the `TresCanvas` component. You can use them b
 
 ### Realistic
 
-The `realistic` preset makes easy to setup the renderer for more realistic 3D scenes.
+The `realistic` preset makes it easy to setup the renderer for more realistic 3D scenes.
 
 ```vue
 <template>

docs/cookbook/lights-shadows.md

@@ -102,7 +102,7 @@ We could divide this into three steps:
 ```
 ### Set the light to cast shadows
 
-We can simple put the boolean `cast-shadow`, Vue understand this as a `prop` with `true` value
+We can simply add the boolean `cast-shadow`, Vue understands this as a `prop` with a value of `true`.
 
 _The AmbientLight doesn't generate any type of shadow here_
 
@@ -147,7 +147,7 @@ Similarly to the previous step, we set the mesh that we want to cast shadow (our
 </template>
 ```
 
-Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/cookbook/basic-animations), and we add movement to our cube, you will see the shadow is animated as well 🤩
+Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/cookbook/basic-animations), and we add movement to our cube, you will see the shadow is animated as well. 🤩
 
 ```vue
 <script setup>

docs/cookbook/load-models.md

@@ -19,7 +19,7 @@ For this guide we are going to focus on loading gLTF (GL Transmission Format) mo
 There are several ways to load models on TresJS:
 
 ::: warning
-Please note that the examples above we use top level await, make sure you wrap it with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information. .
+Please note that in the examples above we use top level `await`s. Make sure to wrap such code with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information.
 :::
 
 ## Using `useLoader`
@@ -65,7 +65,7 @@ import { useGLTF } from '@tresjs/cientos'
 const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
 ```
 
-Alternatively you can easily select Objects inside the model using `nodes` property
+Alternatively you can easily select objects inside the model using the `nodes` property.
 
 ```vue
 <script setup lang="ts">
@@ -89,7 +89,7 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 ## Using `GLTFModel`
 
-The `GLTFModel` component is a wrapper around `useGLTF` that's available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+The `GLTFModel` component is a wrapper around the `useGLTF` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
 
 ```vue{2,9}
 <script setup lang="ts">
@@ -129,7 +129,7 @@ Then is as straightforward as adding the scene to your scene:
 
 ## FBXModel
 
-The `FBXModel` component is a wrapper around `useFBX` that's available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar usage to `GLTFModel`:
+The `FBXModel` component is a wrapper around the `useFBX` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar in usage to `GLTFModel`:
 
 ```vue{2,9}
 <script setup lang="ts">

docs/cookbook/orbit-controls.md

@@ -51,8 +51,7 @@ Now you can use the `TresOrbitControls` component in your scene.
 ```
 :::
 
-
-Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments. You can use the [useTresContext](/api/composables#usetrescontext) composable to get the camera and the renderer.
+Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer. You need to pass those as arguments. You can use the [useTresContext](/api/composables#usetrescontext) composable to get the camera and the renderer.
 
 ::: warning
 `useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Thats why we created a subcomponent called `OrbitControls.vue`. See more about [context](/api/composables#usetrescontext).
@@ -107,7 +106,7 @@ import { OrbitControls } from './OrbitControls.vue'
 ## OrbitControls from `cientos`
 
 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 `cientos` package provides a component called `<OrbitControls />` which 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. 💯

docs/cookbook/shaders.md

@@ -1,11 +1,3 @@
----
-title: Shaders
-description: Shaders open a world of possibilities.
-author: alvarosabu
-thumbnail: /recipes/shaders.png
-difficulty: 2
----
-
 # Shaders
 
 This guide will help you get started with shaders in TresJS.
@@ -20,7 +12,7 @@ _Basic knowledge of how shaders work is necessary_
 
 ## Setting up the scene (optional)
 
-We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
+We import all the modules that we need. To make it more convenient we will import and use the orbit-controls from cientos,
 [look here to see how](/cookbook/orbit-controls).
 
 Now, let's put our camera in the `[11,11,11]` position.
@@ -163,7 +155,7 @@ onLoop(({ elapsed }) => {
  //...
 ```
 
-And that it is, we have our basic shader running smoothly.
+And that's it, we have our basic shader running smoothly. 🎉
 
 ## Using GLSL vite-pluging (optional)
 

docs/cookbook/text-3d.md

@@ -37,7 +37,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 extend({ TextGeometry })
 ```
 
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) needs a only one required argument the font, you can see an example below.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) requires only one argument - the font. You can find an example below.
 
 ```js
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
@@ -56,7 +56,7 @@ const font = await new Promise((resolve, reject) => {
 })
 ```
 
-Now you can use the `TresTextGeometry` component inside a TresMesh in your scene
+Next you can use the `TresTextGeometry` component inside a TresMesh in your scene
 
 ```vue
 <template>
@@ -89,7 +89,7 @@ const fontOptions = {
 }
 ```
 
-We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh
+We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh.
 
 ```ts
 const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
@@ -100,7 +100,7 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
   </TresMesh>
 ```
 
-So the final code would be something like this:
+So the final code would look something like this:
 
 ```vue
 <script setup lang="ts">
@@ -156,11 +156,11 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 </template>
 ```
 
-I know seems like a lot of work, but good news there is a much more simple way
+We know this seems like a lot of work, but good news is, there is a much more simple way
 
 ## TextGeometry from `cientos`
 
-The `cientos` package provides a component called `<Text3D />` that is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+The `cientos` package provides a component called `<Text3D />`, which is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
 
 The nicest part? You don't need to extend the catalog and just pass the font argument.
 It just works. 💯 (if not text is provided, the text will be TresJS)
@@ -182,7 +182,7 @@ We can pass the options as props
 <Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
 ```
 
-in case the options are not provided the default values are:
+in case the options are not provided, the default values will be:
 
 ```js
 size: 0.5,
@@ -195,7 +195,7 @@ bevelOffset: 0,
 bevelSegments: 4,
 ```
 
-By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] the text will start there but we can center it by just passing the flag "center"
+By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] and the text will start there but we can center it by just passing the flag "center"
 
 ```vue
 <Text3D :font="fontPath" :text="my 3d text" center />

docs/de/guide/nuxt.md

@@ -30,7 +30,7 @@ yarn add three @tresjs/nuxt
 
 - 🤓 Automatischer Import von Komponenten und Composables aus dem [TresJS-Ökosystem](https://github.com/orgs/Tresjs/repositories)
 - `TresCanvas` ist nur auf dem Client verfügbar, daher ist es nicht notwendig, `.client` zum Namen der Komponente hinzuzufügen oder `<ClientOnly />` zu verwenden
-- Konfiguriert automatisch den Vue-Compiler, um TresJS-Komponenten zu unterstützen, siehe [warum](/de/guide/troubleshooting.html#fehler-beim-auflosen-des-komponenten-trescomponent)?
+- Konfiguriert automatisch den Vue-Compiler, um TresJS-Komponenten zu unterstützen, siehe [warum](/de/guide/troubleshooting)
 - All die DX-Magie, die mit Nuxt kommt ✨
 
 ## Verwendung

docs/debug/devtools.md

@@ -19,7 +19,7 @@ From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customize
 ### Features
 
 - **Scene Inspector**: Inspect the current scene and its components using a tree view similar to the Vue Devtools component inspector.
-- **Memory Allocation**: See how much memory is being by the components.
+- **Memory Allocation**: See how much memory is being consumed by the components.
 - **Object Inspector**: Inspect the properties of the selected object in the scene, including its children.
 - **Editable Properties**: And yes, you can edit the properties of the selected object and see the changes in real-time.
 

docs/directives/v-always-look-at.md

@@ -18,13 +18,13 @@ import { Box, vAlwaysLookAt } from '@tresjs/cientos'
   </TresCanvas>
 </template>
 ```
-No matter where the Box move will always look-at the position [0,0,0]
+No matter where the `Box` move will always look-at the position [0,0,0]
 
 ### Why not use the in built method look-at?
 
 You could ask, this is fine but I can use the `:look-at` method directly in the component, why should I need this?
 
-The answers is that with the method `:look-at` you will indicated to look at that position just once, when the instance is mounted, then if the object changes this will not get updated
+The answers is that with the method `:look-at` you will indicate to look at that position just once, when the instance is mounted, then if the object changes this will not get updated.
 
 ### You can look at other instance too!
 

docs/directives/v-light-helper.md

@@ -1,6 +1,6 @@
 # v-light-helper 🔆
 
-With the new directive v-light-helper provided by **TresJS**, you can add fast the respective helper to your lights with just one line of code 😍.
+With the new directive v-light-helper provided by **TresJS**, you can quickly add the respective helper to your lights with just one line of code 😍.
 
 The following lights are supported:
 - DirectionalLight

docs/directives/v-log.md

@@ -27,7 +27,7 @@ watch(sphereRef, (value) => {
 </template>
 ```
 
-And is A LOT of code just for a simple log right?
+Don't you think this is A LOT of code just for a simple log?
 
 ## Usage
 
@@ -50,4 +50,4 @@ import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
 </template>
 ```
 
-Note that you can pass a modifier with the name of a property, for example `v-log:material`, and will log directly the `material` property 😍
+Note that you can pass a modifier with the name of a property, for example `v-log:material`, and it will directly log the `material` property 😍

docs/es/guide/nuxt.md

@@ -30,7 +30,7 @@ yarn add three @tresjs/nuxt
 
 - 🤓 Importación automática de componentes y composables del [ecosistema de TresJS](https://github.com/orgs/Tresjs/repositories)
 - `TresCanvas` esta disponible solo en el cliente, no es necesario agregar `.client` al nombre del componente o `<ClientOnly />`
-- Configura automáticamente el compilador de Vue para admitir componentes de TresJS, consulta [por qué](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
+- Configura automáticamente el compilador de Vue para admitir componentes de TresJS, consulta [por qué](/guide/troubleshooting)
 - Toda la magia de DX que viene con Nuxt ✨
 
 ## Uso

docs/guide/getting-started.md

@@ -77,7 +77,7 @@ This is recommended for performance and bundle size reasons, tree-shaking will w
 
 Since v2 is a custom renderer, we need to let the `vue-compiler` of your app know that the components of Tres are ok to be included to avoid the `[Vue warn]: Failed to resolve component` warning.
 
-You just need to add this to your `vite.config.ts` inside of the vue plugin:
+You just need to import and add the `templateCompilerOptions` from TresJS to your `vite.config.ts` inside of the vue plugin:
 
 ```ts
 import { templateCompilerOptions } from '@tresjs/core'

docs/guide/index.md

@@ -9,15 +9,15 @@
 ::: code-group
 
 ```bash [npm]
-npm install @tresjs/core three 
+npm install @tresjs/core three
 ```
 
 ```bash [yarn]
-yarn add @tresjs/core three 
+yarn add @tresjs/core three
 ```
 
 ```bash [pnpm]
-pnpm add @tresjs/core three 
+pnpm add @tresjs/core three
 ```
 
 :::
@@ -44,7 +44,7 @@ pnpm add @types/three -D
 
 ## Vite
 
-If you are using Vite, you have add the following to your `vite.config.ts`:
+If you are using Vite, you just need to import and add the `templateCompilerOptions` from TresJS to your `vite.config.ts` inside of the vue plugin:
 
 ```ts
 import { templateCompilerOptions } from '@tresjs/core'
@@ -59,7 +59,7 @@ export default defineConfig({
 }),
 ```
 
-This is required to make the template compiler work with the custom renderer and not throw warnings on the console. For more info check [here](/guide/troubleshooting.html).
+This is required to make the template compiler work with the custom renderer so it does not throw warnings on the console. For more info check [here](/guide/troubleshooting.html).
 
 ## Try it online
 
@@ -85,13 +85,13 @@ We also have a playground where you can try TresJS online. Check it out [here](h
 
 ## Motivation
 
-[ThreeJS](https://threejs.org/) is a wonderful library to create awesome **WebGL** 3D websites. Is also a constantly updated library that makes hard for wrapper maintainers like [TroisJS](https://troisjs.github.io/) to keep up with all the enhancements.
+[ThreeJS](https://threejs.org/) is a wonderful library to create awesome **WebGL** 3D websites. It's also a library, which is constantly updated, which makes it hard for wrapper maintainers like [TroisJS](https://troisjs.github.io/) to keep up with all the enhancements.
 
-React ecosystem has an impresive **custom render** solution called [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) that allows you build your scenes declaratively with re-usable, self-contained components that react to state.
+The React ecosystem has an impressive **custom render** solution called [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) that allows you build your scenes declaratively with re-usable, self-contained components that react to state.
 
-In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) which works with the same concept that R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F.
+In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), which works with the same concept as R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F.
 
-The only problem is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
+The only issue with this is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
 
 ```ts
 // Example Vite setup
@@ -111,4 +111,3 @@ lunchboxApp.mount('#lunchbox')
 ```
 
 So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS v2**.
-

docs/guide/migration-guide.md

@@ -22,7 +22,7 @@ yarn upgrade @tresjs/core
 
 ### Vue Custom Renderer
 
-**TresJS** is now a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 that lives inside of a wrapper component `TresCanvas` that is responsible for creating the `WebGLRenderer` and the `Scene` for you and creating a **new Vue App instance** to render the scene.
+**TresJS** is now a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 that lives inside of a wrapper component called `TresCanvas` that is responsible for creating the `WebGLRenderer` and the `Scene` for you and creating a **new Vue App instance** to render the scene.
 
 ### Typescript support and Intellisense 🦾
 

docs/guide/nuxt.md

@@ -30,7 +30,7 @@ yarn add three @tresjs/nuxt
 
 - 🤓 Auto-import components and composables from the [TresJS ecosystem](https://github.com/orgs/Tresjs/repositories)
 - `TresCanvas` client only, you don't need to add `.client` to the component name or `<ClientOnly />`
-- Automatically configures vue compiler to support TresJS components, see [why](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
+- Automatically configures vue compiler to support TresJS components, see [why](/guide/troubleshooting)
 - All the DX Magic that comes with Nuxt ✨
 
 ## Usage

docs/guide/troubleshooting.md

@@ -8,13 +8,13 @@ This guide is intended to help you solve the most common issues that you might e
 
 ## I can't see my 3D scene 😭!
 
-You followed the [Getting started guide](/guide/getting-started.md) but you still can see your scene rendered.
+You followed the [Getting started guide](/guide/getting-started.md) but you still can't see your scene rendered.
 
 These are the most common reasons why you might not be able to see your scene:
 
 ### Check the height of your canvas 📏
 
-Another common issue is that the `TresCanvas` component is creating by default a `canvas` element takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either.
+Another common issue is that the `TresCanvas` component is creating by default a `canvas` element that takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either.
 
 ![No height found](/canvas-height.png)
 

docs/guide/your-first-scene.md

@@ -10,7 +10,7 @@ This guide will help you to create your first Tres scene. 🍩
 
 ## Setting up the experience Canvas
 
-Before we can create a Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` HTML element to mount the `WebglRenderer` and initialize the `scene`
+Before we can create a ThreeJS `Scene`, we need a space to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` HTML element to mount the `WebglRenderer` and initialize the `Scene`.
 
 With **TresJS** you only need to import the default component `<TresCanvas />` and add it to the template of your Vue component.
 
@@ -30,7 +30,7 @@ import { TresCanvas } from '@tresjs/core'
 It's important that all components related to the scene live between the `<TresCanvas />` component. Otherwise, they will be not rendered.
 :::
 
-The `TresCanvas` component is going to do some setup work behind the scene:
+The `TresCanvas` component is going to do some setup work behind the scenes:
 
 - It creates a [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer) that automatically updates every frame.
 - It sets the render loop to be called on every frame based on the browser refresh rate.
@@ -109,7 +109,7 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q
 ```
 
 ::: warning
-A common issue is that the camera default position is the origin of the scene (0,0,0), TresJS will automatically set the position of your camera to `[3,3,3]` if the prop `position`. If no camera is defined in you scene, a perspective camera is added automatically.`
+A common issue is that the camera default position is the origin of the scene (0,0,0). TresJS will automatically set the position of your camera to `[3,3,3]` if the prop `position` is not set by you. If no camera is defined in you scene, a perspective camera is added automatically.
 :::
 
 ## Adding a 🍩
@@ -125,7 +125,7 @@ scene.add(donut)
 
 A **Mesh** is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
 
-Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use `<TresMesh />` component, and between the default slots, we are going to pass a `<TresTorusGeometry />` and a `<TresMeshBasicMaterial />`.
+Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use the `<TresMesh />` component, and between the default slots, we are going to pass a `<TresTorusGeometry />` and a `<TresMeshBasicMaterial />` component.
 
 ```vue
 <template>
@@ -140,11 +140,9 @@ Now let's see how we can easily achieve the same with **TresJS**. To do that we
 ```
 
 ::: info
-Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use `<TresAmbientLight />` component.
+Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the three objects you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use the `<TresAmbientLight />` component.
 :::
 
-
-
 ```vue
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'