From 352e842746d92fca58630f7f5cce1f1d8b046c46 Mon Sep 17 00:00:00 2001 From: Thimo <68739517+ThimoDEV@users.noreply.github.com> Date: Mon, 25 Mar 2024 12:49:49 +0100 Subject: [PATCH 1/3] docs: improve readme and contribution docs --- CONTRIBUTING.md | 13 +++++++++- README.md | 56 +++++++++++++++++++--------------------- playground/src/router.ts | 2 +- 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a2c339648..88d8e6def 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -44,10 +44,21 @@ 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. diff --git a/README.md b/README.md index c0d03d3ba..1a0261dd0 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,8 @@ > 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. @@ -21,54 +19,52 @@ It's build on-top of a [Vue Custom Renderer](https://vuejs.org/api/custom-render 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 ``` ### Docs @@ -85,9 +81,9 @@ To build them pnpm run docs:build ``` -## License +## 📑 License -[MIT](/LICENSE) +Published under the [MIT Licence](/LICENSE) - Made with 💚 ## Sponsors diff --git a/playground/src/router.ts b/playground/src/router.ts index d32032450..feddaa557 100644 --- a/playground/src/router.ts +++ b/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', From 133c0dc270a1dc49e2083de5e917833e2ff456d4 Mon Sep 17 00:00:00 2001 From: Thimo <68739517+ThimoDEV@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:59:57 +0100 Subject: [PATCH 2/3] docs(development): add mention of run and debug mode --- CONTRIBUTING.md | 1 + README.md | 2 ++ 2 files changed, 3 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 88d8e6def..25e6ae658 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -62,6 +62,7 @@ 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 > **Important** > There is no need to run anything in the `src` folder or in the root, the `playground` will take care of it diff --git a/README.md b/README.md index 1a0261dd0..1c17d779b 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,8 @@ pnpm 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 From c1a6c1c763ad12d67deabe802d4fcafe8b61a17e Mon Sep 17 00:00:00 2001 From: Thimo <68739517+ThimoDEV@users.noreply.github.com> Date: Mon, 25 Mar 2024 18:48:24 +0100 Subject: [PATCH 3/3] docs: add mention of sources tab focus on breakpoint hit --- CONTRIBUTING.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25e6ae658..fce0ece4f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -62,7 +62,11 @@ 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 +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