Merge branch 'main' into chore/add-tresleches-gui-playground-reorgani…

…sation

.eslintignore

@@ -3,4 +3,6 @@ dist
 **.test.ts
 **.test.js
 **.cy.js
-**/cypress/**
+**/cypress/**
+docs/.vitepress/cache
+docs/.vitepress/dist

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tresjs/eslint-config-vue",
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off"
+    /*     "@typescript-eslint/indent": "off" */
+  }
+}

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-![repository-banner.png](/public/repo-banner.png)
+![repository-banner.png](https://res.cloudinary.com/alvarosaburido/image/upload/v1683452574/repo-banner_d2xeem.png)
 
 # Tres Contributing Guide
 
@@ -8,9 +8,25 @@ No contribution is too small, whether it is a typo in the docs, a bug report or
 
 Thanks from the heart 💚 for taking the time to help out. This guide will help you to get started with the project.
 
+## Ecosystem
+- [@tresjs/core](https://github.com/Tresjs/tres) - The core package.
+- [@tresjs/cientos](https://github.com/Tresjs/cientos) - The abstractions package.
+- [@tresjs/postprocessing](https://github.com/Tresjs/post-processing) - The post-processing package.
+
 ## Setup
 
-Tresjs is a monorepo using [pnpm workspaces](https://pnpm.io/workspaces). Pnpm is a package manager that is faster than npm and yarn, and it also uses symlinks to avoid code duplication.
+All the packages in the ecosystem uses [pnpm workspaces](https://pnpm.io/workspaces). Pnpm is a package manager that is faster than npm and yarn, and it also uses symlinks to avoid code duplication.
+
+
+The `workspace` have the following structure:
+
+```
+.
+├── docs // The documentation
+├── playground // The playground to test the package
+├── src // The source code
+
+```
 
 Make sure you are using [Node.js](https://nodejs.org/en/) version 14 or higher.
 
@@ -28,21 +44,22 @@ If you have the package manager installed, you can install pnpm using the follow
 brew install pnpm
 ```
 
-To develop Tres core or any of the packages, run `pnpm install` in the root of the project. This will install all the dependencies and link the packages together. There is also a `postinstall` script that will build all the packages.
 
 ## Development
 
-TresJS is an ecosystem of packages, each one of them has its own purpose. The main package is `@tresjs/core` which is the core of the library. The other packages are plugins that extend the core functionality, like `@tresjs/cientos` which is a plugin that adds a bunch abstractions and composables to make it easier to create 3D scenes.
+To start developing, you can run `pnpm run playground` in the root folder.
+
+This will start the dev server for the playground `http://localhost:5174/` where you can test the changes you are making on the `src` folder. 
 
-### Core
+> **Important**
+> There is no need to run anything in the `src` folder or in the root, the `playground` will take care of it
 
-You can go to the `packages/tres` folder and run `pnpm dev` to start the dev server. This will start a vite server that will watch for changes in the code and rebuild the package.
 
-This is only a playground to test the core package, to keep the `App.vue` clean create a new component with your scene and import it in the `App.vue` file.
+Whenever you are working on a new feature or fixing a bug, make sure to add a demo under `playground/src/pages` and create a route in the `playground/src/router.ts` to test the changes you are making.
 
-### Cientos
+> **Warning**
+> Make sure to check if there is already a demo for the feature you are working on, if there is, you can add your changes to the existing demo.
 
-You can go to the `packages/cientos` folder and run `pnpm build --watch` to build the package and watch for changes. That way you can test the changes in the playground on the `packages/tres` folder.
 
 ### Docs
 
@@ -72,6 +89,10 @@ Before opening a pull request, make sure to run `pnpm lint` to make sure the cod
   - Create a `fix/{issue-number}-fix-test-in-core` branch for this bug fix.
   - If you are resolving a special issue, add `(fix #xxx[,#xxx])` (#xxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
 
+## Third Party Libraries
+
+Adding a new third party library is generally discouraged, unless it is absolutely necessary. If you want to add a new library, please open an issue first to discuss the best approach.
+
 ## Keep core small
 
-The core package should be as small as possible, it should only contain the core functionality of the library. If you are adding a new feature, please consider adding it as a plugin instead, for example, if you want to add support for [Effect Composer](https://threejs.org/examples/?q=compo#webgl_postprocessing_effectcomposer) you should create a new package called `@tresjs/postprocessing` and add it as a plugin. If it's a smaller scope you can always add it to `cientos` package.
+The core package should be as small as possible, it should only contain the core functionality of the library. If you are adding a new feature, please consider adding it as a plugin instead, for example, if you want to add support for [Effect Composer](https://threejs.org/examples/?q=compo#webgl_postprocessing_effectcomposer) you should create a new package called `@tresjs/post-processing` and add it as a plugin. If it's a smaller scope you can always add it to `cientos` package.

docs/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@tresjs/eslint-config-vue"
+}
+

docs/.vitepress/config.ts

@@ -90,7 +90,7 @@ export default defineConfig({
         text: 'Ecosystem',
         items: [
           {
-            text: `Cientos 💛`,
+            text: 'Cientos 💛',
             link: 'https://cientos.tresjs.org/',
           },
         ],
@@ -107,13 +107,13 @@ export default defineConfig({
           { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
           {
             text: 'Playground',
-            link: 'https://playground.tresjs.org/'
+            link: 'https://playground.tresjs.org/',
           },
           {
             text: 'Ecosystem',
             items: [
               {
-                text: `Cientos 💛`,
+                text: 'Cientos 💛',
                 link: 'https://cientos.tresjs.org/',
               },
             ],

docs/.vitepress/theme/components/DonutExample.vue

@@ -16,7 +16,11 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" :fov="45" :look-at="[0, 0, 0]" />
+    <TresPerspectiveCamera
+      :position="[3, 3, 3]"
+      :fov="45"
+      :look-at="[0, 0, 0]"
+    />
     <OrbitControls />
     <TresMesh>
       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />

docs/.vitepress/theme/components/EmbedExperiment.vue

@@ -3,6 +3,7 @@ defineProps<{
   url: string
 }>()
 </script>
+
 <template>
   <iframe
     frameborder="0"

docs/.vitepress/theme/components/ExtendExample.vue

@@ -10,16 +10,27 @@ const styles = {
 }
 
 const { camera, renderer } = useTresContext()
-
 </script>
+
 <template>
   <ClientOnly>
-    <TresCanvas shadows clear-color="#fff" :style="styles">
+    <TresCanvas
+      shadows
+      clear-color="#fff"
+      :style="styles"
+    >
       <TresPerspectiveCamera :position="[0, 2, 4]" />
       <TresScene>
-        <TresOrbitControls v-if="renderer" :args="[camera, renderer?.domElement]" />
+        <TresOrbitControls
+          v-if="renderer"
+          :args="[camera, renderer?.domElement]"
+        />
 
-        <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+        <TresDirectionalLight
+          :position="[0, 2, 4]"
+          :intensity="2"
+          cast-shadow
+        />
         <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
           <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
           <TresMeshToonMaterial color="#FBB03B" />

docs/.vitepress/theme/components/FirstScene.vue

@@ -16,26 +16,54 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :fov="45"
+      :aspect="1"
+      :near="0.1"
+      :far="1000"
+      :look-at="[0, 0, 0]"
+    />
     <OrbitControls />
-    <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
+    <TresMesh
+      :position="[-2, 6, 0]"
+      :rotation="[0, Math.PI, 0]"
+      cast-shadow
+    >
       <TresConeGeometry :args="[1, 1.5, 3]" />
       <TresMeshToonMaterial color="#82DBC5" />
     </TresMesh>
-    <TresMesh :position="[0, 4, 0]" cast-shadow>
+    <TresMesh
+      :position="[0, 4, 0]"
+      cast-shadow
+    >
       <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
       <TresMeshToonMaterial color="#4F4F4F" />
     </TresMesh>
-    <TresMesh :position="[2, 2, 0]" cast-shadow>
+    <TresMesh
+      :position="[2, 2, 0]"
+      cast-shadow
+    >
       <TresSphereGeometry />
       <TresMeshToonMaterial color="#FBB03B" />
     </TresMesh>
-    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+    <TresDirectionalLight
+      :position="[0, 8, 4]"
+      :intensity="0.7"
+      cast-shadow
+    />
+    <TresMesh
+      :rotation="[-Math.PI / 2, 0, 0]"
+      receive-shadow
+    >
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />
       <TresMeshToonMaterial color="#D3FC8A" />
     </TresMesh>
     <TresAmbientLight :intensity="0.75" />
-    <TresDirectionalLight ref="LightRef" :position="[0, 2, 4]" :intensity="2" cast-shadow />
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+      cast-shadow
+    />
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/FirstSceneLightToon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
+
 /* import { OrbitControls } from '@tresjs/cientos' */
 
 const styles = {
@@ -10,12 +11,21 @@ const styles = {
   overflow: 'hidden',
 }
 </script>
+
 <template>
   <ClientOnly>
-    <TresCanvas shadows clear-color="#fff" :style="styles">
+    <TresCanvas
+      shadows
+      clear-color="#fff"
+      :style="styles"
+    >
       <TresPerspectiveCamera :position="[0, 2, 4]" />
       <OrbitControls />
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+      <TresDirectionalLight
+        :position="[0, 2, 4]"
+        :intensity="2"
+        cast-shadow
+      />
       <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
         <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
         <TresMeshToonMaterial color="#FBB03B" />