feat: V4 (#420)

* feat(AnimatedSprite): add AnimatedSprite, playground, docs * chore(AnimatedSprite): fix linter errors * chore(AnimatedSprite): update docs * feat(AnimatedSprite): allow [numCols, numRows] as atlas prop * docs(AnimatedSprite): reorder sections, improve clarity * docs(AnimatedSprite): format type names * docs(AnimatedSprite): update no-atlas example to use [cols, rows] * chore(AnimatedSprite): run linter, remove console.log * refactor(AnimatedSprite): create new animation frames if props.reversed is toggled * docs(AtlasAnimationDefinitionParser): change 'delay' to 'duration' * refactor(AtlasAnimationDefinitionParser): make parse function private to module * refactor(AtlasAnimationDefinitionParser): use destructuring * refactor(AtlasAnimationDefinitionParser): use destructuring * refactor(AtlasAnimationDefinitionParser): rename returned value 'result' * chore: run linter * refactor(AtlasAnimationDefinitionParser): rename private error logging functions * refactor(Atlas): rename private functions * fix(Atlas): add missing argument to function call * refactor(AnimatedSprite): merge FrameData types as single type * refactor(AnimatedSprite): change callbacks to emits * chore(AnimatedSprite): run linter * chore(AnimatedSprite): format Atlas error message * fix(AnimatedSprite): return nullFrame animation if requested animation not found * refactor(AnimatedSprite): simplify component onLoop * chore(AnimatedSprite): run lint --fix * refactor(AnimatedSprite): add Atlasish type * refactor(AnimatedSprite): remove onLoad prop * feat(app)!: 227 Change the keyboardcontrols implementation * docs(AnimatedSprite): update docs and demos * docs(AnimatedSprite): update playground demo * refactor(AnimatedSprite): remove TresSprite * refactor(AnimatedSprite): rename prop, anchor -> center * refactor(AnimatedSprite): remove asSprite prop, improve clarity * docs(AnimatedSprite): update docs * refactor(AnimatedSprite): update playground * refactor(AnimatedSprite): rename 'page' -> 'atlas' * refactor(AnimatedSprite): make definitions reactive * feat(AnimatedSprite): change default fps * docs(AnimatedSprite): mark props as 'not reactive' * feat(AnimatedSprite): always emit last frame name on loop and on end * docs(AnimatedSprite): correct and update docs/demos * chore(AnimatedSprite): run linter * docs(AnimatedSprite): improve wording * feat: add arrow keys support * refactor(AnimatedSprite): improve variable name * refactor(AnimatedSprite): use degrees instead of radians in example * chore(AnimatedSprite): fix linter errors * refactor(app)!: 349 Remove directives from cientos * docs(app): 227 Add documentation for new KeyboardControls * feat(app): 227 Final details, ready to go * refactor: move in the right position a piece of code * chore: update core to `v4` * chore: release v4.0.0-next.0 * fix(MeshReflectionMaterial)!: add features/docs, reorganize * feat(AnimatedSprite): add asSprite prop * feat(AnimatedSprite): dispose texture onUnmounted * feat(AnimatedSprite): remove explicit click event * feat(AnimatedSprite): remove unnecessary Suspense * docs(AnimatedSprite): add asSprite control to demo * docs(AnimatedSprite): update demo code line highlights * docs(AnimatedSprite): update atlas path, image names * refactor: defineExpose * refactor: change value.value -> value.instance in defineExpose * fix: uncomment section * refactor(app): 160 Add Global audio, stats, statsGl * refactor: remove extra semi-colon, lint issue * chore: Fix Lint (console.logs should be disabled in playground) * chore: update lint * chore: fix lints * chore: fix demos * chore: fix lint * feat(app): 421 Adapt components to use useLoop instead of useRenderLoop * Revert "feat(app): 421 Adapt components to use useLoop instead of useRenderLoop" This reverts commit 24e9812. * feat(app): 421 Update components to use useLoop instead of useRenderLoop * chore: update statsGl y stats * fix lint * chore: update useEnviroment * chore: update fbo * chore: lint * feat: re-remove tweakpane (#425) * feat(app)!: 313 re-uninstall tweakpane * chore: fix lint * docs: update enviroment and useEnviroment docs * fix: remove hardcoded speed number, that setting at 0 doesn't stop the effect * update lock * chore: add Cylinder to v4 (#439) * chore: add Cylinder to v4 * chore: fix playground link * fix(Lensflare demo): add camera #435 (#441) * feat: update to core v4.2 * chore(ci): update node version to 20 for linting * chore: fix lints * feat: 423 enable on demand render mode usage (#436) * chore(deps): update deps to latest * chore: on demand invalidation composable with prop change detection * feat: on-demand orbit-controls * feat: on-demand camera controls * feat: invalidate also on autoRotate * feat: on-demand map controls and refactor * feat: on-demand transform controls * feat: on-demand keyboard controls * feat: on-demand keybaord controls * chore: added demo suffix to control pages to avoid confusions * feat: on-demand pointer lock controls * feat: on-demand scroll controls * feat: on-demand levioso * feat: correct orbit controls auto rotate invalidation * feat: on-demand text3d * feat: on-demand mouse-parallax * feat: on-demand fbo and size watcher refactor * chore(playground): refactor to use useLoop and sub components * chore: remove unused import for lint fix * chore(playground): refactor lensflare demo to use useLoop * feat: on-demand sampler * feat: on-demand invaldiation on reflector prop change * chore: added render activity graph and try to make on-demand work on AnimatedSprite * chore: renamed positional audio demo * chore: on-demand smoke * feat: on-demand precipitation * feat: on-dermand stars * feat: on-demand Environment * feat: on-demand sky * feat: on-demand Ocean component * chore: testing on-demand on fit * feat: on-demand Wobble Material * feat: on-demand invalidation holographic material * feat: on-demand reflection material * feat: on-demand custom shader material * chore: rename bakeshadows demo * chore: misc route * chore: ci, update action setup * docs: add migration guide from v3 in cientos (to do grammar check, ad… (#428) * docs: add migration guide from v3 in cientos (to do grammar check, add img) * docs: grammar corrections * fix lint * docs: rename migration-guide.md -> migrating-from-v3.md * docs: update wording/formatting --------- Co-authored-by: Peter <petermoldovia@yahoo.ca> * fix(types): fixed types generics for `useGLTF` (#448) * feat(app): Add the option for x and y in mouseparallax component (#444) * feat(app): Add the option for x and y in mouseparallax component * fix reactivity, grammar corrections * change ref for shallowRef * chore: release v4.0.0-next.1 * docs(SVG): set playground render-mode to on-demand * refactor(HolographicMaterial): remove useOnDemandInvalidation, use invalidate * refactor(CustomShaderMaterial): remove useOnDemandInvalidated, use invalidate * refactor(MeshReflectionmaterial): remove useOnDemandInvalidated, use invalidate * refactor: call invalidate on props update * docs: add on-demand shapes playground demo * fix: reimplement ContactShadows for v4 (#449) * chore(deps): update deps to latest * chore: on demand invalidation composable with prop change detection * feat: on-demand orbit-controls * feat: on-demand camera controls * feat: invalidate also on autoRotate * feat: on-demand map controls and refactor * feat: on-demand transform controls * feat: on-demand keyboard controls * feat: on-demand keybaord controls * chore: added demo suffix to control pages to avoid confusions * feat: on-demand pointer lock controls * feat: on-demand scroll controls * feat: on-demand levioso * feat: correct orbit controls auto rotate invalidation * feat: on-demand text3d * feat: on-demand mouse-parallax * feat: on-demand fbo and size watcher refactor * chore(playground): refactor to use useLoop and sub components * chore: remove unused import for lint fix * chore(playground): refactor lensflare demo to use useLoop * feat: on-demand sampler * feat: on-demand invaldiation on reflector prop change * chore: added render activity graph and try to make on-demand work on AnimatedSprite * chore: renamed positional audio demo * chore: on-demand smoke * feat: on-demand precipitation * feat: on-dermand stars * feat: on-demand Environment * feat: on-demand sky * feat: on-demand Ocean component * chore: testing on-demand on fit * feat: on-demand Wobble Material * feat: on-demand invalidation holographic material * feat: on-demand reflection material * feat: on-demand custom shader material * chore: rename bakeshadows demo * chore: misc route * chore: ci, update action setup * chore: update Tres core * fix: reimplement ContactShadows for v4 core * docs: change link name * fix(ContactShadows): add invalidate to updates --------- Co-authored-by: alvarosabu <alvaro.saburido@gmail.com> * feat(Sparkles): invalidate on update (#446) * feat(Sparkles): invalidate on update * chore: fix linter error * refactor(Sparkles): remove renderMode predicate before invalidate * chore: remove on demand composable (#452) * chore: remove `useOnDemandInvalidation` on Levioso * chore: remove composable `useOnDemandInvalidation` * chore: remove composable from Ocean * chore: remove composable on Precipitation * chore: remove composable from sky * chore: remove from Fit * chore: remove from smoke * chore: remove from orbit-controls * chore: remove composable from Text3D * chore: remove from mouse parallax * chore: remove composable from Reflector * chore: only needed fbo invalidation * chore: remove composable from useSurfaceSampler * chore: remove composable from all controls * chore: add invalidation on loop * chore: remove prop speed check on loop for Levioso * chore: remove invalidateOnDemand on MapControls * chore: remove `invalidateOnDemand` from Keyboard controls * chore: add invalidate on fit method, remove watch props * chore: invalidation refactor leftovers * chore(types): fixes some type issues * fix: update to core v4.2.2 to remove warning on invalidation * chore: fix lint * chore: release v4.0.0-rc.0 * feat(fbo): add autoRender flag as an option to useFBO (#458) This PR adds an `autoRender` flag to `FBOOptions`. This flag allows consumers of `useFBO` who want to take control of when and where to render the render target instead of always rendering it with the default scene and camera. Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com> * chore: fix lint * chore: release v4.0.0-rc.1 * docs: added recipe for tweakpane to migration guides * chore(playground): added same scale as default * chore: release v4.0.0-rc.2 * chore: linter fix * chore: update deps to fix docs build * fix: typescript issues (#459) * fix: type assertion for props as params of `normalizeVectorFlexibleParam` * fix: type assertion on camera and pointerlock controls * refactor(BlurPass): fix TS errors * refactor(SVG): fix TS errors * refactor(Lensflare): fix TS errors * refactor(Reflector): silence and explain TS error * refactor(HolographicMaterial): add declaration for clock * refactor(MeshWobbleMaterial): fix TS error * fix(useProgress): remove extraneous, unused argument * chore(types): fixed gradient type issue from core * fix(types): controls types * chore(types): fix loaders types * chore(types): HTML * chore(types): improve occlude type on HTML * refactor(environment)!: properly type and return texture ref BREAKING CHANGE: `useEnvironment` now returns a ref with the texture instead of an object { texture } * chore(types): HTML, backdrop and Sparkles type issues * chore(types): correct occlusion types without the refs * fix(transform-controls): fps drops due prop watcher for invalidation * chore: type issues on transform controls --------- Co-authored-by: Peter <petermoldovia@yahoo.ca> * fix: AnimatedSprite (#464) * fix: remove explicit fallthrough attr attachment * fix: remove infinite loop * docs: move click from canvas to object * docs: convert props table to HTML * docs: rephrase * chore: deps update * chore: update deps * ci: update lint action * chore: fix lint * chore: fix lint * chore: lint issues * chore: lint remove whitespaces * chore: lint --------- Co-authored-by: Peter <petermoldovia@yahoo.ca> Co-authored-by: alvarosabu <alvaro.saburido@gmail.com> Co-authored-by: Chau Tran <nartc7789@gmail.com>
Tresjs · Aug 20, 2024 · 0cdd58e · 0cdd58e
1 parent 9e17559
commit 0cdd58e
Show file tree

Hide file tree

Showing 170 changed files with 11,932 additions and 8,309 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -8,22 +8,20 @@ env:
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Run Lint

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,86 @@
+
+
+## [4.0.0-rc.2](https://github.com/Tresjs/cientos/compare/4.0.0-rc.1...4.0.0-rc.2) (2024-07-26)
+
+## [4.0.0-rc.1](https://github.com/Tresjs/cientos/compare/4.0.0-rc.0...4.0.0-rc.1) (2024-07-25)
+
+
+### Features
+
+* **fbo:** add autoRender flag as an option to useFBO ([#458](https://github.com/Tresjs/cientos/issues/458)) ([ddcd4ac](https://github.com/Tresjs/cientos/commit/ddcd4ac36cfd5b5cbb06e967878a9468b390a17c))
+
+## [4.0.0-rc.0](https://github.com/Tresjs/cientos/compare/4.0.0-next.1...4.0.0-rc.0) (2024-07-24)
+
+
+### Features
+
+* **Sparkles:** invalidate on update ([#446](https://github.com/Tresjs/cientos/issues/446)) ([cbfd226](https://github.com/Tresjs/cientos/commit/cbfd226b94fb363f3a59a735365c679e8142420f))
+
+
+### Bug Fixes
+
+* reimplement ContactShadows for v4 ([#449](https://github.com/Tresjs/cientos/issues/449)) ([d71c328](https://github.com/Tresjs/cientos/commit/d71c328969da64beee05088ced05bd7b632d6f31))
+* update to core v4.2.2 to remove warning on invalidation ([42afa6e](https://github.com/Tresjs/cientos/commit/42afa6e67962796d2ce076a29917262f9ca09ea5))
+
+## [4.0.0-next.1](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0-next.1) (2024-07-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* **MeshReflectionMaterial:** add features/docs, reorganize
+
+### Features
+
+* 423 enable on demand render mode usage ([#436](https://github.com/Tresjs/cientos/issues/436)) ([b3eef40](https://github.com/Tresjs/cientos/commit/b3eef40430d23e2ba6c5a195c0cf510c0bc54ce9))
+* **AnimatedSprite:** add asSprite prop ([7a14b55](https://github.com/Tresjs/cientos/commit/7a14b5592d78f57785d04bd1484a35e501b7cceb))
+* **AnimatedSprite:** dispose texture onUnmounted ([18d6904](https://github.com/Tresjs/cientos/commit/18d6904570cc34ca9c3e64e6b42ec5c639a6e885))
+* **AnimatedSprite:** remove explicit click event ([042c350](https://github.com/Tresjs/cientos/commit/042c350883aec53bdf0331cc4b3378e06d87fb88))
+* **AnimatedSprite:** remove unnecessary Suspense ([082d695](https://github.com/Tresjs/cientos/commit/082d695f1a6843a8fa5edcd8e6c32ec8530a03a9))
+* **app:** 421 Update components to use useLoop instead of useRenderLoop ([ad3b290](https://github.com/Tresjs/cientos/commit/ad3b290c4afb3adf5bf36ccf02d08ea1beb98bc8))
+* **app:** Add the option for x and y in mouseparallax component ([#444](https://github.com/Tresjs/cientos/issues/444)) ([12d5834](https://github.com/Tresjs/cientos/commit/12d5834becba2cdfc26300fd5bf1ec1f9e26afe3))
+* re-remove tweakpane ([#425](https://github.com/Tresjs/cientos/issues/425)) ([72284ce](https://github.com/Tresjs/cientos/commit/72284ce2e0e378d353b3573a6216ad6f6dcd4425))
+* update to core v4.2 ([14b30f9](https://github.com/Tresjs/cientos/commit/14b30f99282ed3cb1d21cbdf31e672867d79f27c))
+
+
+### Bug Fixes
+
+* **Lensflare demo:** add camera [#435](https://github.com/Tresjs/cientos/issues/435) ([#441](https://github.com/Tresjs/cientos/issues/441)) ([981de57](https://github.com/Tresjs/cientos/commit/981de572c97183b8d2070925daa8209d2fa6b55e))
+* **MeshReflectionMaterial:** add features/docs, reorganize ([58703e3](https://github.com/Tresjs/cientos/commit/58703e362bbe731a56b7ce903160df13513ec18a))
+* remove hardcoded speed number, that setting at 0 doesn't stop the effect ([e67f3a2](https://github.com/Tresjs/cientos/commit/e67f3a295025ca1bfb1c0f664ceccefac389e0af))
+* **SkyDemo:** value.value -> value ([82fe77b](https://github.com/Tresjs/cientos/commit/82fe77b4dc11fd23b47e40bc33a843dc69cf017f))
+* **types:** fixed types generics for `useGLTF` ([#448](https://github.com/Tresjs/cientos/issues/448)) ([62a9bcc](https://github.com/Tresjs/cientos/commit/62a9bcc2d4490c7493667c3316441b5363cb42fc))
+* uncomment section ([fac2253](https://github.com/Tresjs/cientos/commit/fac22534818a15d49f631b790185f4f1266c7339))
+* vue attrs hyphenation issues ([4f9b61b](https://github.com/Tresjs/cientos/commit/4f9b61b954a916d8f8880798f06c03b79092896b))
+
+## [4.0.0-next.0](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0-next.1) (2024-03-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **app:** 349 Remove directives from cientos
+* **app:** 227 Change the keyboardcontrols implementation
+
+### Features
+
+* add arrow keys support ([39e2094](https://github.com/Tresjs/cientos/commit/39e2094338ba37613b189e7d593ecc2b0a35680b))
+* **AnimatedSprite:** add AnimatedSprite, playground, docs ([d6ea81b](https://github.com/Tresjs/cientos/commit/d6ea81b5540c2f4bf0f233e269ed98992ee8a551))
+* **AnimatedSprite:** allow [numCols, numRows] as atlas prop ([3309d9c](https://github.com/Tresjs/cientos/commit/3309d9c24ee1d006b41bdeaa29eac7c8f9658342))
+* **AnimatedSprite:** always emit last frame name on loop and on end ([ed16136](https://github.com/Tresjs/cientos/commit/ed16136a84143396ae8accc327429c1ef1fbdd1b))
+* **AnimatedSprite:** change default fps ([44831a4](https://github.com/Tresjs/cientos/commit/44831a492e6a881061b9a113d1a627026b172056))
+* **app:** 227 Change the keyboardcontrols implementation ([fed0f86](https://github.com/Tresjs/cientos/commit/fed0f86b3c92aa8ea86be0e6193e1639d421bcc2))
+* **app:** 227 Final details, ready to go ([6f06213](https://github.com/Tresjs/cientos/commit/6f06213d92f9b389c3d1fca377002ae0b060c87b))
+
+
+### Bug Fixes
+
+* **AnimatedSprite:** return nullFrame animation if requested animation not found ([453819e](https://github.com/Tresjs/cientos/commit/453819e0237b58177a34bbeee0af4ce44252195c))
+* **Atlas:** add missing argument to function call ([e6b147e](https://github.com/Tresjs/cientos/commit/e6b147e45520238e8fd467863972af8fe8f8ec37))
+
+
+### Code Refactoring
+
+* **app:** 349 Remove directives from cientos ([8fc4cd5](https://github.com/Tresjs/cientos/commit/8fc4cd582ba85cc09e000627449622e8861ec76a))
+
 ## [3.9.0](https://github.com/Tresjs/cientos/compare/3.8.0...3.9.0) (2024-05-07)
 
 ### Features
@@ -38,6 +121,22 @@
 * transformControls throws error when switching active camera ([f1a477a](https://github.com/Tresjs/cientos/commit/f1a477a46c341f6ed4e58fce1e8999e19feba8d0))
 * **type:** correct the east description ([c26da1f](https://github.com/Tresjs/cientos/commit/c26da1f11524f2445a1b0653f35354de4d3b10ed))
 
+## [4.0.0-next.0](https://github.com/Tresjs/cientos/compare/3.8.0...4.0.0-next.0) (2024-03-27)
+
+
+### Features
+
+* **app:** 252 adding ocean component ([7efb293](https://github.com/Tresjs/cientos/commit/7efb29300a5cda624801316e6bc4f33a88e8de04))
+* **app:** 252 Renamed as ocean, add sky support ([473bac6](https://github.com/Tresjs/cientos/commit/473bac61d9831b9334f4ba78b0d4ab979b7b167f))
+* **app:** Add RoundedBox component ([8b6cb67](https://github.com/Tresjs/cientos/commit/8b6cb67b686bf242aa6e96c3b68af535ddb944d1))
+
+
+### Bug Fixes
+
+* **app:** 252 Apply review feedback ([4449208](https://github.com/Tresjs/cientos/commit/4449208fccedca0a37ea2e62142b00188a21e0ad))
+* apply feedback ([3a50bc2](https://github.com/Tresjs/cientos/commit/3a50bc29c00dd64775643ab08fe3e5ba569c8248))
+* little detail in the interface ([fb6456a](https://github.com/Tresjs/cientos/commit/fb6456a063cc28868fe0178b28695c04ad812ccc))
+
 ## [3.8.0](https://github.com/Tresjs/cientos/compare/3.7.0...3.8.0) (2024-02-07)
 
 ### Features

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,20 +1,8 @@
 import { defineConfig } from 'vitepress'
 import { resolve } from 'pathe'
-import componentList from '../component-list/components'
 
 const whitelist = ['TresCanvas', 'TresLeches', 'TresScene']
 
-const collapsedSidebarCategories = new Set(['Materials', 'Shapes', 'Misc', 'Directives'])
-const sidebar = [
-  {
-    text: 'Guide',
-    items: [{ text: 'Introduction', link: '/guide/' }],
-  },
-  ...componentList,
-].map(
-  c => collapsedSidebarCategories.has(c.text) ? Object.assign(c, { collapsed: true }) : c,
-)
-
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Cientos',
@@ -65,7 +53,116 @@ export default defineConfig({
       { text: 'Examples', link: 'https://lab.tresjs.org/' },
     ],
 
-    sidebar,
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Migration from v3', link: '/guide/migrating-from-v3' },
+        ],
+      },
+      {
+        text: 'Abstractions',
+        items: [
+          { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+          { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
+          { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
+          { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
+          { text: 'Lensflare', link: '/guide/abstractions/lensflare' },
+          { text: 'Reflector', link: '/guide/abstractions/reflector' },
+          { text: 'GlobalAudio', link: '/guide/abstractions/global-audio' },
+          { text: 'Fbo', link: '/guide/abstractions/fbo' },
+          { text: 'useFBO', link: '/guide/abstractions/use-fbo' },
+          { text: 'useSurfaceSampler', link: '/guide/abstractions/use-surface-sampler' },
+          { text: 'Sampler', link: '/guide/abstractions/sampler' },
+          { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
+        ],
+      },
+      {
+        text: 'Controls',
+        items: [
+          { text: 'OrbitControls', link: '/guide/controls/orbit-controls' },
+          { text: 'CameraControls', link: '/guide/controls/camera-controls' },
+          { text: 'TransformControls', link: '/guide/controls/transform-controls' },
+          { text: 'PointerLockControls', link: '/guide/controls/pointer-lock-controls' },
+          { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
+          { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
+          { text: 'MapControls', link: '/guide/controls/map-controls' },
+        ],
+      },
+      {
+        text: 'Loaders',
+        items: [
+          { text: 'useProgress', link: '/guide/loaders/use-progress' },
+          { text: 'useGLTF', link: '/guide/loaders/use-gltf' },
+          { text: 'GLTFModel', link: '/guide/loaders/gltf-model' },
+          { text: 'useFBX', link: '/guide/loaders/use-fbx' },
+          { text: 'FBXModel', link: '/guide/loaders/fbx-model' },
+          { text: 'useVideoTexture', link: '/guide/loaders/use-video-texture' },
+          { text: 'SVG', link: '/guide/loaders/svg' },
+        ],
+      },
+      {
+        text: 'Materials',
+        collapsed: true,
+        items: [
+          { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
+          { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
+          { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
+          { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
+        ],
+      },
+      {
+        text: 'Shapes',
+        collapsed: true,
+        items: [
+          { text: 'Box', link: '/guide/shapes/box' },
+          { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
+          { text: 'Circle', link: '/guide/shapes/circle' },
+          { text: 'Cone', link: '/guide/shapes/cone' },
+          { text: 'Cylinder', link: '/guide/shapes/cylinder' },
+          { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
+          { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
+          { text: 'Line2', link: '/guide/shapes/line2' },
+          { text: 'Octahedron', link: '/guide/shapes/octahedron' },
+          { text: 'Plane', link: '/guide/shapes/plane' },
+          { text: 'Ring', link: '/guide/shapes/ring' },
+          { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
+          { text: 'Sphere', link: '/guide/shapes/sphere' },
+          { text: 'Superformula', link: '/guide/shapes/superformula' },
+          { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
+          { text: 'Torus', link: '/guide/shapes/torus' },
+          { text: 'TorusKnot', link: '/guide/shapes/torus-knot' },
+          { text: 'Tube', link: '/guide/shapes/tube' },
+        ],
+      },
+      {
+        text: 'Staging',
+        items: [
+          { text: 'Backdrop', link: '/guide/staging/backdrop' },
+          { text: 'Environment', link: '/guide/staging/environment' },
+          { text: 'useEnvironment', link: '/guide/staging/use-environment' },
+          { text: 'Sky', link: '/guide/staging/sky' },
+          { text: 'Stars', link: '/guide/staging/stars' },
+          { text: 'Smoke', link: '/guide/staging/smoke' },
+          { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
+          { text: 'Precipitation', link: '/guide/staging/precipitation' },
+          { text: 'Sparkles', link: '/guide/staging/sparkles' },
+          { text: 'Ocean', link: '/guide/staging/ocean' },
+        ],
+      },
+      {
+        text: 'Misc',
+        collapsed: true,
+        items: [
+          { text: 'Stats', link: '/guide/misc/stats' },
+          { text: 'Html', link: '/guide/misc/html-component' },
+          { text: 'StatsGl', link: '/guide/misc/stats-gl' },
+          { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
+          { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
+        ],
+      },
+    ],
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/tresjs/cientos' },

diff --git a/docs/.vitepress/theme/components/AnimatedSpriteCenterDemo.vue b/docs/.vitepress/theme/components/AnimatedSpriteCenterDemo.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { AnimatedSprite, Box, OrbitControls } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import type { AtlasData } from '../../../../src/core/abstractions/AnimatedSprite/Atlas'
+
+const { centerX, centerY, fps, asSprite } = useControls({
+  centerX: { value: 0.5, min: 0, max: 1, step: 0.1 },
+  centerY: { value: 0.5, min: 0, max: 1, step: 0.1 },
+  fps: { value: 5, min: 0, max: 30, step: 1 },
+  asSprite: true,
+})
+
+const centerDemoAtlas: AtlasData = { frames: [] }
+const centerDemoImgData = (() => {
+  const NUM_ROWS_COLS = 64
+  const rects: { x: number, y: number, w: number, h: number }[] = []
+  let h = 0
+  for (let r = 0; r < NUM_ROWS_COLS; r += h) {
+    let w = 0
+    h++
+    if (r + h >= NUM_ROWS_COLS) {
+      continue
+    }
+    for (let c = 0; c < NUM_ROWS_COLS; c += w) {
+      w++
+      if (c + w >= NUM_ROWS_COLS) {
+        continue
+      }
+      rects.push({ x: c, y: r, w, h })
+    }
+  }
+
+  const canvas = document.createElement('canvas')
+  const IMG_SIZE = 2048
+  const COL_SIZE = IMG_SIZE / NUM_ROWS_COLS
+  const ROW_SIZE = IMG_SIZE / NUM_ROWS_COLS
+  canvas.width = IMG_SIZE
+  canvas.height = IMG_SIZE
+  document.body.append(canvas)
+  const ctx = canvas.getContext('2d')!
+  const EDGE_center_SIZE = 6
+  rects.forEach((rect, i) => {
+    const frame = { x: rect.x * COL_SIZE, y: rect.y * ROW_SIZE, w: rect.w * COL_SIZE, h: rect.h * ROW_SIZE }
+    const { x, y, w, h } = frame
+    centerDemoAtlas.frames.push({ filename: `rect_${i.toString().padStart(4, '0')}`, frame })
+    ctx.fillStyle = '#222'
+    ctx.fillRect(x, y, w, h)
+
+    ctx.fillStyle = '#999'
+    ctx.fillRect(
+      x + w * 0.5 - EDGE_center_SIZE * 0.5,
+      y + h * 0.5 - EDGE_center_SIZE * 0.5,
+      EDGE_center_SIZE,
+      EDGE_center_SIZE,
+    )
+
+    ctx.fillRect(x, y, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w * 0.5 - EDGE_center_SIZE * 0.5, y, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w - EDGE_center_SIZE, y, EDGE_center_SIZE, EDGE_center_SIZE)
+
+    ctx.fillRect(x, y + h * 0.5 - EDGE_center_SIZE * 0.5, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w - EDGE_center_SIZE, y + h * 0.5 - EDGE_center_SIZE * 0.5, EDGE_center_SIZE, EDGE_center_SIZE)
+
+    ctx.fillRect(x, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w * 0.5 - EDGE_center_SIZE * 0.5, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w - EDGE_center_SIZE, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
+  })
+  const imgData = canvas.toDataURL()
+  canvas.parentElement?.removeChild(canvas)
+  return imgData
+})()
+</script>
+
+<template>
+  <TresLeches style="position:absolute; left:10px; top:10px;" />
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera
+      :position="[5, 1, 5]"
+      :look-at="[-2, 0, 0]"
+    />
+    <OrbitControls />
+    <TresGroup :position-x="2">
+      <Suspense>
+        <AnimatedSprite
+          :image="centerDemoImgData"
+          :atlas="centerDemoAtlas"
+          animation="rect"
+          :center="[centerX.value, centerY.value]"
+          :fps="fps.value"
+          :as-sprite="asSprite.value"
+        >
+          <TresGroup :scale="0.5">
+            <Box
+              :scale="[1, 0.06, 0.06]"
+              color="red"
+            />
+            <Box
+              :scale="[0.06, 1, 0.06]"
+              color="blue"
+            />
+            <Box
+              :scale="[0.06, 0.06, 1]"
+              color="green"
+            />
+          </TresGroup>
+        </AnimatedSprite>
+      </Suspense>
+      <TresGridHelper :args="[10, 10]" />
+    </TresGroup>
+  </TresCanvas>
+</template>