docs: improve readme and contribution docs

CONTRIBUTING.md

@@ -44,13 +44,29 @@ If you have the package manager installed, you can install pnpm using the follow
 brew install pnpm
 ```
 
+Build the core library 
+
+```
+pnpm run build
+```
+
+Now run the playground to get started
+
+```
+pnpm run playground
+```
 
 ## Development
 
-To start developing, you can run `pnpm run playground` in the root folder.
+To start developing, you can run `pnpm playground` in the root folder.
 
 This will start the dev server for the playground at `http://localhost:5173/` where you can test the changes you are making in the `src` folder. 
 
+After running the dev server press F5 or `Run and Debug` play mode to be able to set and read breakpoints.
+
+If you have breakpoints hit, you'll notice that chrome devtools always jumps to the sources tab.
+You can disable this in chrome devtools => ⚙️ Settings => Toggle `Focus Sources panel when triggering a breakpoint`.
+
 
 > **Important**
 > There is no need to run anything in the `src` folder or in the root, the `playground` will take care of it

README.md

@@ -10,67 +10,65 @@
 
 > Declarative ThreeJS using Vue Components
 
-- 💡 Build 3D scene as they were Vue components
-- ⚡️ Powered by Vite
-- 🥰 It brings all the updated features of ThreeJS right away regardless the version
-- 🦾 Fully Typed
+- [📖  Read the documentation](https://tresjs.org)
+- [👾  Playgrounds](https://stackblitz.com/@alvarosabu/collections/tresjs)
 
 Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion.
 
 It's build on-top of a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) and it's powered by Vite.
 
 The goal is to provide the Vue's community an easy way of building 3D scenes with Vue, always up to date with the latest ThreeJS features and with 0-to-none maintenance.
 
+## Features
+
+- 💡 Build 3D scene as they were Vue components
+- ⚡️ Powered by Vite
+- 🥰 It brings all the updated features of ThreeJS right away regardless the version
+- 🦾 Fully Typed
+
 ## Installation
 
 ```bash
 pnpm install @tresjs/core three
 ```
 
-## Docs
-
-Checkout the [docs](https://tresjs.org)
-
-## Demos
-
-- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
-
 ## Ecosystem
 
-| Package | Version |
-| --------------------------- | :------------------------------------------------------------------------------------------------- |
-| [Tres](https://github.com/TresJS/tres) | ![tres version](https://img.shields.io/npm/v/@tresjs/core/latest.svg?label=%20&color=%2382DBCA) |
-| [Cientos](https://github.com/TresJS/cientos) | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00) |
+| Package  | Version  |
+| ------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- |
+| [Tres](https://github.com/TresJS/tres)  | ![tres version](https://img.shields.io/npm/v/@tresjs/core/latest.svg?label=%20&color=%2382DBCA)  |
+| [Cientos](https://github.com/TresJS/cientos)  | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00)  |
 | [Post-processing](https://github.com/TresJS/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff7bac) |
-| [Nuxt](https://github.com/TresJS/nuxt) | ![nuxt version](https://img.shields.io/npm/v/@tresjs/nuxt/latest.svg?label=%20&color=4f4f4f&logo=nuxt.js) |
-| [TresLeches 🍰](https://github.com/TresJS/leches) | ![tresleches version](https://img.shields.io/npm/v/@tresjs/leches/latest.svg?label=%20&color=ffffff) |
+| [Nuxt](https://github.com/TresJS/nuxt)  | ![nuxt version](https://img.shields.io/npm/v/@tresjs/nuxt/latest.svg?label=%20&color=4f4f4f&logo=nuxt.js)  |
+| [TresLeches 🍰](https://github.com/TresJS/leches)  | ![tresleches version](https://img.shields.io/npm/v/@tresjs/leches/latest.svg?label=%20&color=ffffff)  |
 
 ## Contribution
 
-We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+We are open to contributions 🙏, please read the [contributing guide](/CONTRIBUTING.md) to get started.
 
 ### Setup
 
+- Clone this repository
+- Install dependencies using
+
 ```
-pnpm install --shamefully-hoist
+pnpm install
 ```
 
-### Playground
-
-To run the small playground
+- Build the library code
 
 ```
-pnpm run playground
+pnpm build
 ```
 
-### Build lib
-
-To build the core as library mode just use
+- Run the playground and start developing with TresJS
 
 ```
-pnpm run build
+pnpm playground
 ```
 
+- Set and read breakpoints by pressing F5 or the play button in `Run and Debug`
+
 ### Docs
 
 To run de docs in dev mode
@@ -85,9 +83,9 @@ To build them
 pnpm run docs:build
 ```
 
-## License
+## 📑 License
 
-[MIT](/LICENSE)
+Published under the [MIT Licence](/LICENSE) - Made with 💚
 
 ## Sponsors
 

playground/src/router.ts

@@ -34,7 +34,7 @@ const routes = [
  {
  path: '/multiple',
  name: 'Multiple',
- component: () => import('./pages/Multiple.vue'),
+ component: () => import('./pages/multiple.vue'),
  },
  {
  path: '/cameras/multiple-cameras',