docs: added orbit controls back and v3 blog post (#356)

* docs: added orbit controls back and v3 blog post

* chore: lint issue

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

@@ -2,7 +2,7 @@
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
-/* import { OrbitControls } from '@tresjs/cientos' */
+import { OrbitControls } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -17,7 +17,7 @@ const gl = {
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" :fov="45" :look-at="[0, 0, 0]" />
-    <!--     <OrbitControls /> -->
+    <OrbitControls />
     <TresMesh>
       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
       <TresMeshBasicMaterial color="orange" />

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

@@ -2,8 +2,7 @@
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
 import { TresCanvas } from '@tresjs/core'
-/* import LocalOrbitControls from './LocalOrbitControls.vue'; */
-/* import { OrbitControls } from '@tresjs/cientos' */
+import { OrbitControls } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -18,7 +17,7 @@ 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]" />
-    <!--     <LocalOrbitControls /> -->
+    <OrbitControls />
     <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
       <TresConeGeometry :args="[1, 1.5, 3]" />
       <TresMeshToonMaterial color="#82DBC5" />

docs/blog/announcing-v-3.md

@@ -0,0 +1,115 @@
+---
+sidebar: false
+---
+
+# Announcing v3.0.0 🎉
+
+Already? Yes! We are excited to announce the release of:
+
+- **TresJS v3.0.0** 
+- **Cientos v3.0.0** 
+
+But you might be wondering, why a major release so soon if we just released 2.x.x not so while ago 🤔? Does it means more breaking changes? 🤯
+
+<div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/ck5JRWob7folZ7d97I" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/nickelodeon-throwback-all-that-kel-ck5JRWob7folZ7d97I">via GIPHY</a></p>
+
+**Short answer no**, don't expect changes so big like the one from `1.x.x` to `2.x.x`, specially for you, the end user.
+
+Then why `3.x`? We have a good reason. The team has been working hard to bring you the best possible experience when using TresJS and authoring new packages that extend the core functionality, so we decided to **re-think the whole internal state management from a new perspective**.
+
+## Bye bye Store, hello Context Provider 🤓
+
+Until now, we were using a `Store` to manage the internal state of the library
+
+```ts
+const state: TresState = shallowReactive({
+    uuid: generateUUID(),
+    camera: undefined,
+    cameras: [],
+    canvas: undefined,
+    scene: undefined,
+    renderer: undefined,
+    aspectRatio: undefined,
+    pointerEventHandler: undefined,
+  })
+```
+
+Important things for the abstractions like `camera`, `scene`, `renderer`, etc. were stored in the `Store` and we were using `reactive` and `shallowReactive` to make sure that the changes were propagated to the components that were using them.
+
+And we had some kind of "getters" and "setters" to access/edit the state from the outside, for example, on the Cientos package.
+
+```ts
+function getState(key: string) {
+    return state[key]
+}
+
+function setState(key: string, value: any) {
+    state[key] = value
+} 
+```
+
+If a plugin author or a user wanted to create an abstraction around the `core`. They would have to use something like this:
+
+```ts
+const { state } = useTres()
+
+watch(
+  () => state.camera,
+  (camera) => {
+    // do something with the camera
+  }
+)
+```
+
+But this was far from ideal, authors could potentially mutate the state in a way that could break the library, and we were not able to control that.
+
+Also we experience lot of bugs related to the reactivity system, specially when using `shallowReactive` and `shallowRef` to avoid unnecessary re-renders.
+
+So we decided to **move away from the `Store` and use a `Context Provider` instead** where the state is a plain object with .
+
+
+```ts
+const toProvide: TresContext = {
+    sizes,
+    scene:  shallowRef<Scene>(scene),
+    camera,
+    cameras: readonly(cameras),
+    renderer,
+    raycaster: shallowRef(new Raycaster()),
+    controls: ref(null),
+    extend,
+    addCamera,
+    removeCamera,
+    setCameraActive,
+  }
+
+  provide('useTres', toProvide);
+```
+
+So now you can use any property of the state individually, like this:
+
+```html
+
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+
+const { camera, scene, renderer} = useTresContext()
+</script>
+```
+
+::: warning
+
+`useTresContext` can be only be used inside of a `TresCanvas` since it acts as the provider for the context data.
+
+:::
+
+See more here [useTresContext](/api/composables.html#usetrescontext-former-usetres).
+
+---
+
+Hope you like this new release, we are working hard to bring you the best possible experience when using TresJS.
+
+- Releases https://github.com/Tresjs/tres/releases
+- Cientos https://github.com/Tresjs/cientos/releases
+
+

docs/package.json

@@ -9,10 +9,10 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "unocss": "^0.53.4",
+    "unocss": "^0.54.0",
     "vite-svg-loader": "^4.0.0"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:3.0.0"
+    "@tresjs/core": "workspace:3.0.1"
   }
 }

package.json

@@ -64,47 +64,47 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^3.1.1",
-    "@vueuse/core": "^10.2.1"
+    "@vueuse/core": "^10.3.0"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
     "@huntersofbook/plausible-vue": "^1.0.0",
-    "@release-it/conventional-changelog": "^5.1.1",
+    "@release-it/conventional-changelog": "^7.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tresjs/cientos": "2.2.0",
-    "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@tresjs/cientos": "3.0.1",
+    "@types/three": "^0.154.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.32.3",
-    "@vitest/ui": "^0.32.3",
-    "@vue/test-utils": "^2.4.0",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.15.1",
-    "esno": "^0.16.3",
+    "@vitest/coverage-c8": "^0.33.0",
+    "@vitest/ui": "^0.33.0",
+    "@vue/test-utils": "^2.4.1",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
+    "eslint-plugin-vue": "^9.16.1",
+    "esno": "^0.17.0",
     "gsap": "^3.12.2",
     "jsdom": "^22.1.0",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.1",
-    "prettier": "^2.8.8",
-    "release-it": "^15.11.0",
+    "prettier": "^3.0.0",
+    "release-it": "^16.1.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "three": "^0.154.0",
-    "unocss": "^0.53.4",
-    "unplugin": "^1.3.1",
+    "three": "^0.155.0",
+    "unocss": "^0.54.0",
+    "unplugin": "^1.4.0",
     "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.3.9",
+    "vite": "^4.4.7",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "3.0.2",
-    "vite-plugin-inspect": "^0.7.32",
-    "vite-plugin-require-transform": "^1.0.20",
+    "vite-plugin-dts": "3.4.0",
+    "vite-plugin-inspect": "^0.7.33",
+    "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.5",
-    "vitest": "^0.32.3",
+    "vitepress": "1.0.0-beta.7",
+    "vitest": "^0.33.0",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5"
   }

playground/auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {

playground/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "2.1.4",
-    "@tresjs/core": "workspace:3.0.0",
+    "@tresjs/cientos": "3.0.1",
+    "@tresjs/core": "workspace:3.0.1",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@tresjs/leches": "^0.4.0",
+    "@tresjs/leches": "^0.5.0",
     "unplugin-auto-import": "^0.16.6",
     "vite-plugin-glsl": "^1.1.2",
-    "vue-tsc": "^1.8.4"
+    "vue-tsc": "^1.8.8"
   }
 }

playground/src/components/DebugUI.vue

@@ -7,9 +7,9 @@ import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 /* import '@tresjs/leches/styles' */
 
 const gl = reactive({
-  clearColor: '#82DBC5',
+  /*   clearColor: '#82DBC5', */
   shadows: true,
-  alpha: false,
+  alpha: true,
   shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,

playground/src/components/LocalOrbitControls.vue

@@ -231,7 +231,6 @@ export interface OrbitControlsProps {
 // TODO: remove disable once eslint is updated to support vue 3.3
 // eslint-disable-next-line vue/no-setup-props-destructure
 const {
-    makeDefault = false,
     autoRotate = false,
     autoRotateSpeed = 2,
     enableDamping = false,