feat: release v5 (#563)

* docs: un-comment back the new features

* feat(Helper): add component, demo, docs (#543)

* feat(Helper): add component, demo, docs

* refactor(useHelper): use destructuring

* refactor(useHelper): remove

---------

Co-authored-by: Alvaro Saburido <[email protected]>

* feat(PointMaterial): add component, demo, docs (#545)

* feat(PointMaterial): add component, demo, docs

* chore: lint

* refactor: remove unused function argument

* feat: deconstruct points material imports

---------

Co-authored-by: alvarosabu <[email protected]>

* feat(ScreenQuad): add component, playground, docs (#530)

* feat(MarchingCubes): add component, demo, docs (#553)

* feat(MarchingCubes): add component, demo, docs

* feat(MarchingCubes): add default material

* chore: lint

---------

Co-authored-by: alvarosabu <[email protected]>

* feat(CubicBezierLine): add component, demo, docs (#546)

* feat(CubicBezierLine): add component, demo, docs

* docs: revert broken link

* feat(QuadraticBezierLine): add component, demo, docs (#548)

Co-authored-by: alvarosabu <[email protected]>

* feat(AccumulativeShadows): add component, demo, docs (#558)

* feat(AccumulativeShadows): add component, demo, docs

* refactor(RandomizedLights): rename interface

* refactor(AccumulativeShadows): change default alphaTest value

* refactor(AccumulativeShadows): expose update function

* feat(Bounds): add component, demo, docs (#408) (#568)

* feat(Bounds): add component, demo, docs

* refactor(Bounds): useScreenSize -> useResize

* refactor(Bounds): rename variables, remove unneeded state

* docs: fix material items merge issue

---------

Co-authored-by: alvarosabu <[email protected]>

* refactor(Align): change callback to emit, improve naming (#571)

* feat(CircleShadow): add component, demo, docs (#549)

* feat(CircleShadow): add component, demo, docs

* docs(CircleShadow): fix prop name

---------

Co-authored-by: alvarosabu <[email protected]>

* feat(Stage): add component, demo, docs (#572)

* feat(AccumulativeShadows): add component, demo, docs

* feat(Bounds): add component, demo, docs

* refactor(Bounds): useScreenSize -> useResize

* refactor(Bounds): rename variables, remove unneeded state

* refactor(Align): change callback to emit, improve naming

* refactor(RandomizedLights): rename interface

* refactor(AccumulativeShadows): change default alphaTest value

* refactor(AccumulativeShadows): expose update function

* feat(Stage): add component, demo, docs

* docs: fix material items

* feat: import RandomizedLightsProps from correct file

* refactor(Stage): update types

---------

Co-authored-by: alvarosabu <[email protected]>

* chore(Outline): type material

* feat(LOD): add component, playground, docs (#524)

Co-authored-by: Alvaro Saburido <[email protected]>

* refactor(Bounds): replace clamp import with MathUtils.clamp for consistency

* feat(useIntersect): add function, demo, docs (#550)

Co-authored-by: alvarosabu <[email protected]>

* chore: update dependencies in package.json and pnpm-lock.yaml

- Bump versions for several dependencies including:
  - @vueuse/core from ^12.0.0 to ^12.3.0
  - three-stdlib from ^2.34.0 to ^2.35.2
  - eslint from ^9.16.0 to ^9.17.0
  - release-it from ^17.10.0 to ^18.0.0
  - typescript-eslint packages to ^8.19.0
  - Update various other dependencies to their latest versions for improved compatibility and performance.

- Update pnpm-lock.yaml to reflect the changes in package.json and ensure consistency across the project.

* fix: fixes to next components and docs (#586)

* docs(Environment): remove demo

- page contained multiple instances of useProgress
- useProgress instances interfere with one another

* docs(sidebar): use data from component-list

* docs: add unlisted components

* docs(Environment): fix code snippet formatting

* docs: remove non-existant directives from component list

* docs(Backdrop): fix demo errors

- TS errors
- traverse and cast-shadows on null

* fix(Lensflare): add THREE src

* three-stdlib Lensflare is not working
* use THREE examples/jsm src in the meantime

* chore(Lensflare): add TODO

* chore: update dependencies and refactor logging

- Updated `@Tresjs/core` dependency to next version
- Removed the `useLogger` composable and replaced its usage with direct calls to `logError` and `logWarning` in various files for improved clarity and performance.
- Updated `package.json` and `pnpm-lock.yaml` to reflect the changes in dependencies.

* feat!: 609-refactor-usegltf (#610)

* feat!: refactor useGLTF to use new useLoader based on `useAsyncState`

BREAKING CHANGE: useGLTF no longer returns the plain obj, it now returns an object with reactive data (state, isLoading, error) and a load method.

- Refactored GLTF loading in components to use the updated `useGLTF` composable, improving state management and performance.
- Removed unnecessary `Suspense` wrappers in demo components for cleaner rendering.
- Added new demo components for showcasing GLTF model loading with DRACO compression.
- Updated documentation to reflect changes in GLTF model usage.

* fix: update import syntax and clean up unused code

- Changed import statement for `TresObject` in `gltf-model.md` to use the correct TypeScript syntax.
- Removed unused imports in `use-gltf/index.vue` for cleaner code.
- Added ESLint directive to disable console warnings in `TheModel.vue` for development purposes.

* docs: update useGLTF implementation and clean up components

- Refactored components to utilize the new `useGLTF` structure, replacing direct access to nodes with reactive state management.
- Removed unused imports and commented-out code for improved clarity and maintainability.
- Updated documentation references to reflect changes in component usage and structure.

* feat: adapt useAnimations to new useAsyncState loader's model

- Added a new demo page for `use-animations` showcasing the animated GLTF model.
- Refactored the `useAnimations` composable to support reactive animations using `MaybeRef`.
- Updated the `TheModel.vue` component to utilize the new reactive state for animations.
- Enhanced the main demo layout with `TresCanvas`, `OrbitControls`, and lighting for improved visualization.

* chore: update @Tresjs/core dependency to version 5.0.0-next.0

- Changed the dependency for @Tresjs/core in package.json and playground/vue/package.json to the stable version 5.0.0-next.0 from a previous URL reference.
- Updated pnpm-lock.yaml to reflect the new version of @Tresjs/core across all relevant sections.
- Adjusted the useGLTF implementation in documentation to align with the new state management approach.

* fix: return nodes and materials computed directly (#612)

* feat: return nodes and materials computed directly

* docs: correct lint issues in markdown and update latest changes of useLoader

* feat: 616-adapt-code-to-core-ctx-renderer-state-breaking-change (#620)

* feat: update to latest core v5 next

* feat: update renderer access in components to use instance reference

- Updated various components to access the renderer through `renderer.instance.value` instead of `renderer.value`, ensuring compatibility with the latest core changes.
- Adjusted related watch and invalidate calls to check for `renderer.canBeInvalidated.value` before invoking invalidate, improving performance and stability.
- Refactored multiple files including shapes, controls, and materials to reflect these changes, enhancing overall code consistency and maintainability.

* feat: 615-adapt-camera-dependant-abstractions-to-core-v5-camera-changes (#621)

* feat: adapt core camera ctx changes to cientos

* fix: remove unused Camera type import in useFBO module

- Removed the unused `Camera` type import from `index.ts` in the `useFBO` module to clean up the code and improve maintainability.

* chore(deps): update dependencies to latest versions

- Upgraded several dependencies in `package.json` and `pnpm-lock.yaml` to their latest versions, including:
  - `@release-it/conventional-changelog` from `10.0.0` to `10.0.1`
  - `@types/three` from `0.172.0` to `0.176.0`
  - `@vitejs/plugin-vue` from `5.2.1` to `5.2.4`
  - `eslint` from `9.17.0` to `9.27.0`
  - `eslint-plugin-vue` from `9.32.0` to `10.1.0`
  - `gsap` from `3.12.5` to `3.13.0`
  - `three` from `0.173.0` to `0.176.0`
  - `typescript` from `5.7.2` to `5.8.3`
  - `vite` from `6.0.7` to `6.3.5`
  - `vite-plugin-banner` from `0.8.0` to `0.8.1`
  - `vite-plugin-dts` from `4.4.0` to `4.5.4`
  - `vite-plugin-glsl` from `1.3.1` to `1.4.1`
  - `vitepress` from `1.5.0` to `1.6.3`
- Adjusted related dependencies in `pnpm-lock.yaml` to ensure compatibility and stability across the project.

* chore(deps): update @Tresjs/core to version 965 and upgrade Vue to 3.5.14

- Updated the dependency for `@Tresjs/core` in `package.json` and `playground/vue/package.json` to the new version `965`.
- Upgraded Vue from `3.5.13` to `3.5.14` in `pnpm-lock.yaml` to ensure compatibility with the latest features and improvements.
- Adjusted related references in the codebase to utilize the updated context and camera handling methods, enhancing overall functionality and maintainability.

* chore(deps): update @Tresjs/core to version 0731c19

- Updated the dependency for `@Tresjs/core` in `package.json` and `pnpm-lock.yaml` to the new version `0731c19`.
- Adjusted related references in the lock file to ensure consistency and compatibility across the project.

* feat: 611 move cores usetexture to cientos (#617)

* feat: add useTexture composable and related documentation

- Introduced the `useTexture` composable for loading textures in TresJS scenes using THREE.js's texture loader.
- Created a new demo component `UseTextureDemo.vue` to showcase the usage of the `useTexture` composable.
- Updated the documentation to include a guide for `useTexture`, detailing its options and providing usage examples.
- Added new routes and components in the playground for testing and demonstrating the `useTexture` functionality.
- Ensured all new components follow best practices and TypeScript standards.

* feat: introduce useTextures composable and related documentation

- Added the `useTextures` composable for loading multiple textures simultaneously in TresJS scenes using THREE.js's texture loader.
- Created a new demo component `PBRTexturesDemo.vue` to showcase the usage of the `useTextures` composable with PBR textures.
- Updated the documentation to include a guide for `useTextures`, detailing its parameters, return values, and providing usage examples.
- Added new routes and components in the playground for testing and demonstrating the `useTextures` functionality.
- Ensured all new components adhere to best practices and TypeScript standards.

* fix: clean up logging and formatting in PBRTexturesDemo and related documentation

- Removed unnecessary console logging of loading state in `PBRTexturesDemo.vue` for cleaner output.
- Adjusted formatting in `use-textures.md` for improved readability.
- Updated import statements in `PBRTextures.vue` to remove unused dependencies, streamlining the component.
- Ensured all changes adhere to TypeScript standards and best practices.

* chore: disable console warnings in PBRTextures.vue for cleaner development output

- Added an ESLint directive to disable console warnings in `PBRTextures.vue`, allowing for a more streamlined development experience without cluttering the console.
- This change is aimed at improving the usability of the component during development while maintaining adherence to TypeScript standards.

* fix: set new texture as initial value for textue loader

* fix: added initial value to useTextures

* chore: update @Tresjs/core dependency to latest version

- Updated the @Tresjs/core dependency from version be3280b to 0731c19 in package.json and playground/vue/package.json for improved functionality.
- Adjusted pnpm-lock.yaml to reflect the updated version of @Tresjs/core across all relevant sections.

* refactor: abstractions using useTextures from core now use local useTexture

* refactor: update texture loading in Ocean and Precipitation components

- Replaced the use of destructured state from `useTexture` with direct texture loading using `TextureLoader` in the `Ocean.vue` component for improved clarity and performance.
- Updated the `watchEffect` in `Precipitation.vue` to use a more descriptive variable name for the texture state, enhancing code readability.
- Ensured that texture loading logic is consistent across components, aligning with best practices for resource management.

* chore: fix some demos shenanigans

* feat!: 608 drop umd support (#622)

* chore(vite): update output formats and remove UMD globals

- Added 'es' format to the Vite configuration for better module compatibility.
- Removed the UMD globals section from the output configuration as it is no longer necessary, streamlining the build process.

* feat!: update output formats and remove UMD globals

BREAKING CHANGE: cientos  is now ESM only

- Added 'es' format to the Vite configuration for better module compatibility.
- Removed the UMD globals section from the output configuration as it is no longer necessary, streamlining the build process.

* fix: rollback to previous use tres usage (#623)

* refactor: useTres partial context to simplify

* refactor: update useFBO to utilize useTres for improved context handling

* refactor: update BakeShadows to use useTres for improved renderer access

* refactor: update MouseParallax to use useTres for improved renderer access

* refactor: update controls to use useTres for improved renderer access and simplify context handling

* refactor: remove unused StatsGl import in KeyboardControlsDemo.vue for cleaner code

* refactor: remove unused parameter from onBeforeRender in LensflareImpl and clean up imports in OrbitControls for improved code clarity

* refactor: update Bounds component to use camera directly from useTres for improved clarity and simplify renderer invalidation logic

* refactor: update components to use useTres for improved renderer access and simplify invalidation logic

* refactor: update shape components to use useTres for improved renderer access and simplify invalidation logic

* refactor: update shape and staging components to use useTres for improved renderer access and simplify invalidation logic

* chore: update pnpm-lock.yaml to reflect dependency version upgrades including Vue, ESLint, and various plugins for improved stability and performance

* refactor: format code for improved readability by adjusting indentation in Atlas.ts, HTML.vue, and ShaderData.ts

* chore: update @Tresjs/core dependency to version 5.0.0-next.1

- Changed the dependency for `@Tresjs/core` in `package.json` and `playground/vue/package.json` from a specific commit URL to the latest pre-release version `5.0.0-next.1`.
- Updated `pnpm-lock.yaml` to reflect this change across all relevant sections, ensuring consistency and compatibility with the updated core features.

* chore: release v5.0.0-next.0

* chore: update @Tresjs/core dependency to version 5.0.0-next.2

- Updated the `@Tresjs/core` dependency in `package.json` and `playground/vue/package.json` to the latest pre-release version `5.0.0-next.2`.
- Adjusted `pnpm-lock.yaml` to reflect this change across all relevant sections, ensuring consistency and compatibility with the updated core features.

* chore: release v5.0.0-next.1

* fix: adapt to renderer.isntance no longer being shallowRef

* fix: type issues from v5

- Added type imports for `WebGLRenderer` and `TresRenderer` in various components to enhance type safety and clarity.
- Simplified prop emit definitions in `Align.vue` by combining event types into a single union type.
- Ensured consistent usage of `TresRenderer` in `SoftShadows.vue` and `useCubeCamera.ts` for better integration with TresJS.
- Updated `MouseParallax.vue` to use non-null assertion for camera reference, improving type safety.
- Adjusted `AccumulativeShadows/component.vue` to cast renderer to `WebGLRenderer` where necessary for compatibility.

* fix: remove unused type import in MouseParallax.vue

- Removed the unused import of `Object3D` from `MouseParallax.vue` to enhance code clarity and maintainability.
- This change aligns with the ongoing effort to streamline type imports and improve type safety across the codebase.

* chore: release v5.0.0-next.2

* chore(playground): update BlenderCube component to use correct GLTF node

- Changed the reference from `state.value?.nodes?.Cube` to `nodes.value?.BlenderCube` in the BlenderCube.vue component to correctly access the GLTF model.
- Imported `computed` and `shallowRef` from Vue to enhance reactivity and maintainability of the component.

* fix: typescript issues (#624)

* fix: update Stats component to use onRender instead of onAfterRender

- Replaced the `onAfterRender` hook with `onRender` in the Stats component to align with the updated rendering lifecycle.
- This change ensures that the stats rendering ends at the correct point in the render cycle, improving performance and accuracy.

* fix: update useIntersect to use onRender instead of onAfterRender

- Replaced the `onAfterRender` hook with `onRender` in the `useIntersect` function to align with the updated rendering lifecycle.
- This change ensures that intersection checks occur at the correct point in the render cycle, improving performance and accuracy.

* fix: update ContactShadows component to use TresRenderer for improved type safety

- Replaced instances of `WebGLRenderer` with `TresRenderer` in the `ContactShadows.vue` component to enhance type safety and align with the TresJS framework.
- Updated the `update` and `blurShadow` functions to accept the new renderer type, ensuring compatibility with the latest rendering lifecycle.
- Added a `toValue` conversion for the `scene` parameter in the `update` function to maintain reactivity and proper scene handling.

* fix: remove unused type import in ContactShadows.vue

- Removed the unused import of `WebGLRenderer` from `ContactShadows.vue` to enhance code clarity and maintainability.
- This change aligns with the ongoing effort to streamline type imports and improve type safety across the codebase.

* fix: update model traversal to use Three.js Mesh for improved type safety

- Replaced the type import of `TresObject` with `Mesh` from Three.js in both `useFBX` and `useGLTF` components to enhance type safety and align with Three.js standards.
- Updated model traversal logic to utilize `instanceof Mesh` for better type checking, ensuring that shadow properties are correctly applied to mesh objects.

* fix: improve object addition in EnvironmentScene for better type handling

- Updated the `add` method in `EnvironmentScene` to iterate over objects and add them individually to `virtualScene`, enhancing type safety and clarity.
- Added a TypeScript error suppression comment to address a type error encountered during the update.

* fix: update type definitions for @types/node and @types/three

- Upgraded `@types/node` from `22.10.5` to `24.0.3` and `@types/three` from `0.176.0` to `0.177.0` in `package.json` to ensure compatibility with the latest TypeScript features and improvements.
- Updated `pnpm-lock.yaml` to reflect these changes, ensuring all dependencies are aligned with the new type definitions.

* fix: enhance type definitions in Align component for improved type safety

- Updated the type definition for the `parent` property in the `AlignCallbackOptions` interface to use `Object3D<Object3DEventMap>` for better type accuracy.
- Changed the type of the `container` property to `Group` to align with Three.js standards.
- Adjusted the `emit` call in the `update` function to cast `parent` as `Object3D<Object3DEventMap>`, ensuring type safety during event handling.

* fix: update StatsGl component to use onRender for improved rendering lifecycle

- Replaced the `onAfterRender` hook with `onRender` in the `StatsGl` component to align with the updated rendering lifecycle.
- This change ensures that the stats update occurs at the correct point in the render cycle, enhancing performance and accuracy.

* fix: refactor MeshReflectionMaterial to improve rendering lifecycle and type safety

- Replaced the custom `onBeforeRender` function with the `onBeforeRender` from `useLoop` for better integration with the rendering lifecycle.
- Enhanced type safety by ensuring the correct types are used for `renderer`, `scene`, and `camera`.
- Removed redundant code related to rendering logic, streamlining the component and improving maintainability.
- Added warnings for unsupported WebGPURenderer to inform users of limitations.
- Updated texture matrix and projection matrix calculations to ensure accurate rendering behavior.

* fix: enhance type safety in LOD component by updating Object3D type

- Updated the import statement to include `Object3DEventMap` for improved type accuracy.
- Modified the `levels` array and `object` assignment to use `Object3D<Object3DEventMap>`, ensuring better type handling and alignment with Three.js standards.

* fix: enhance type safety and streamline imports in MeshReflectionMaterial and BakeShadows

- Removed unused imports of `Object3D` and `Scene` in `MeshReflectionMaterial` to improve code clarity.
- Updated the `BakeShadows` component to conditionally set shadow map properties only if the renderer is an instance of `WebGLRenderer`, enhancing type safety and preventing potential runtime errors.

* fix: update @Tresjs/core dependency to a specific version URL for improved stability

- Changed the dependency for `@Tresjs/core` from version `5.0.0-next.4` to a specific URL `https://pkg.pr.new/@tresjs/core@bb01f3d` in both `package.json` and `playground/vue/package.json` to ensure consistent behavior across environments.
- Updated `pnpm-lock.yaml` to reflect the new dependency URL, maintaining alignment with the updated package structure.
- Enhanced type safety in various components by refining type imports and ensuring correct usage of `Object3D<Object3DEventMap>` where applicable.

* fix: update @Tresjs/core dependency to a stable version

- Changed the dependency for `@Tresjs/core` from a specific URL to version `5.0.0-next.5` in both `package.json` and `pnpm-lock.yaml` to ensure consistent behavior and stability across environments.
- Updated the lock file to reflect the new version, maintaining alignment with the updated package structure.

* chore: update @Tresjs/core dependency to version 5.0.0-next.6

- Updated the `@Tresjs/core` dependency in `package.json` and `playground/vue/package.json` to the latest pre-release version `5.0.0-next.6` for improved stability and features.
- Adjusted `pnpm-lock.yaml` to reflect this change across all relevant sections, ensuring consistency and compatibility with the updated core functionalities.

* chore: release v5.0.0-next.3

* fix(transform-controls): use correct emit on mouse up (#625)

* fix: create a local raycast for the HTML component (#627)

* chore: release v5.0.0-next.4

* feat!: refactor useFBX (#628)

* feat!: refactor useFBX

BREAKING CHANGE: useFBX no longer returns the plain obj, it now returns an object with reactive data (state, isLoading, error) and a load method.

- Updated `vue` to version `3.5.17` and `three` to version `0.178.0` in `package.json` for enhanced compatibility and features.
- Upgraded `@vitejs/plugin-vue` to version `6.0.0` and `vite` to version `7.0.2` to leverage the latest improvements in the build process.
- Enhanced the `useFBX` composable to provide a reactive state for loading FBX models, allowing for better handling of model properties and loading states.
- Improved the `FBXModel` component to support shadow properties and added a new demo for better visualization of FBX model loading.
- Updated documentation to reflect changes in the FBX model loading process and added examples for better clarity.

* fix(TheModel.vue): remove unused type import for improved clarity

- Removed the unused import of `Group` from TheModel.vue to enhance code clarity and maintainability. This change aligns with the ongoing effort to streamline type imports and improve type safety across the codebase.

* feat: expose model state in useFBX and useGLTF components

- Added `defineExpose` to both `useFBX` and `useGLTF` components to expose the reactive model state, allowing for better integration and access to the model instance in parent components.
- This enhancement improves the usability of the components by providing a direct reference to the model state, facilitating more dynamic interactions and updates.

* fix(useFBX): add missing comma in defineExpose for model instance

- Added a missing comma in the `defineExpose` call within the `useFBX` component to ensure proper syntax and prevent potential runtime errors. This minor fix enhances code clarity and maintains consistency in the component's structure.

* refactor: streamline instance exposure and remove unused refs (#629)

* refactor(Sky.vue, Sparkles/component.vue): streamline instance exposure and remove unused refs

- Updated `Sky.vue` to directly expose the `skyImpl` instance instead of using a shallow reference, improving clarity and performance.
- Removed the unused `sparkleRef` in `Sparkles/component.vue`, simplifying the component structure while maintaining functionality.
- These changes enhance code maintainability and align with best practices for instance management in Vue components.

* fix: update camera reference handling in Billboard and ScreenSpace components

- Modified the `update` function in `Billboard.vue` to correctly use `camera.value` for improved reactivity.
- Updated the camera reference handling in `ScreenSpace.vue` to ensure both `outerRef` and `camera.value` are checked before accessing their properties, enhancing stability.
- Adjusted the `imageBounds` computed property in `Image/component.vue` to safely access image dimensions, preventing potential runtime errors.
- Removed unused `shallowRef` import in `Sparkles/component.vue` to streamline the component structure.

* refactor: update type references to TresObject for improved type safety

- Changed the type of `dummy` in `TransformPayload` to `TresObject` for better alignment with TresJS framework.
- Updated `objRef` and `parentRef` in `Helper/component.vue` to use `TresObject`, enhancing type accuracy.
- Modified the `useHelper` function to accept `MaybeRefOrGetter<TresObject>` instead of `Object3D`, ensuring consistency across helper functionalities.
- These changes improve type safety and maintainability in the codebase.

* refactor(Text3D.vue, material.ts, component.vue): enhance type safety and clarity

- Updated `Text3D.vue` to explicitly type the `slots` variable as `Slots` and the return type of `localText` as `string`, improving type safety and clarity.
- Removed the unused type import of `Object3D` in `Helper/component.vue` to streamline the component structure.
- Extended Three.js types in `material.ts` to include runtime properties in the `Material` interface and created a properly typed interface for `MeshGlassMaterial`, enhancing type accuracy and maintainability.
- These changes contribute to better type safety and code clarity across the components.

* fix(ContactShadows.vue): remove unnecessary TypeScript error suppression

- Removed the `@ts-expect-error` comments in the `blurShadow` function, as they are no longer needed. This change improves code clarity and maintains a cleaner codebase by eliminating outdated error handling comments.
- The removal aligns with ongoing efforts to enhance type safety and maintainability in the project.

* refactor(Atlas.ts): replace useLoader with TextureLoader for improved texture handling (#631)

- Removed the use of `useLoader` from `@Tresjs/core` and implemented a direct instantiation of `TextureLoader` from Three.js for loading textures. This change enhances clarity and performance by simplifying the texture loading process.
- Updated the promise handling for texture loading to ensure proper resolution and rejection, improving error handling.
- Adjusted the way texture dimensions are accessed to streamline the code and enhance maintainability.

* refactor: replace SVG component with useSVG composable for improved SVG handling (#632)

* refactor: replace SVG component with useSVG composable for improved SVG handling

- Updated `SVGDemo.vue` to utilize the new `UseSVG` component from `@Tresjs/cientos`, enhancing the way SVGs are loaded and displayed in TresJS scenes.
- Modified the component list to reflect the change from `SVG` to `useSVG`, ensuring consistency in documentation and usage.
- Removed the outdated `svg.md` guide and created a new `use-svg.md` guide to document the `useSVG` composable, providing comprehensive usage instructions and examples.
- Added new demo components in the playground to showcase the capabilities of the `useSVG` composable, improving the developer experience and demonstrating advanced use cases.
- Updated the router to include new routes for the `useSVG` functionality, ensuring easy navigation to the new features.

* refactor: improve code formatting and consistency in SVG documentation and components

- Updated `use-svg.md` to enhance readability by adjusting the formatting of interface properties and ensuring consistent spacing.
- Refactored the `component.vue` file to maintain consistent formatting in the `defineExpose` call, improving code clarity.
- These changes contribute to better maintainability and adherence to coding standards across the documentation and component files.

* refactor(PositionalAudio.vue): streamline audio buffer handling

- Replaced the direct use of `shallowRef` for the audio buffer with a destructured state from `useLoader`, enhancing clarity and maintainability.
- This change simplifies the audio loading process and aligns with best practices for reactive state management in Vue components.

* refactor(PositionalAudio.vue): remove duplicate audio buffer state declaration

- Eliminated the redundant declaration of the audio buffer state by consolidating it into a single instance using `useLoader`. This change enhances code clarity and maintains best practices for state management in Vue components.

* chore: release v5.0.0-next.5

* refactor: remove useRenderLoop and implement onLoop function directly in components

- Updated multiple demo components to eliminate the use of `useRenderLoop` from `@Tresjs/core`, replacing it with a direct `onLoop` function for improved clarity and performance.
- Each component now handles the animation loop directly, enhancing maintainability and aligning with best practices for reactive state management in Vue.
- Adjusted the event binding for the `TresCanvas` component to utilize the new `onLoop` function, ensuring smooth integration of animation logic.

* chore: comment out alias configuration in VitePress config

- Commented out the alias configuration in `docs/.vitepress/config.ts` for `@Tresjs/cientos`, maintaining the existing structure while preventing potential conflicts during development.
- This change ensures that the deduplication of `three` remains intact without altering the current functionality.

* chore: remove unused import in VitePress config

- Eliminated the unused import of `resolve` from `pathe` in `docs/.vitepress/config.ts`, streamlining the configuration file and enhancing clarity. This change contributes to better maintainability and aligns with best practices for code cleanliness.

* chore: update alias configuration in VitePress config

- Restored the alias configuration for `@Tresjs/cientos` in `docs/.vitepress/config.ts`, pointing it to the source directory. This change enhances module resolution during development and maintains consistency in the project structure.
- The update ensures that the deduplication of `three` remains intact while allowing for easier access to the TresJS components.

* chore: update Node.js version in Netlify configuration

- Changed the Node.js version from 18 to 22 in the `netlify.toml` file to ensure compatibility with the latest features and improvements. This update aligns with best practices for maintaining an up-to-date build environment.

* chore: update alias configuration in VitePress config

- Changed the alias for `@Tresjs/cientos` in `docs/.vitepress/config.ts` to point to the distribution file `../../dist/trescientos.js`. This update ensures that the correct module is resolved during the build process, aligning with the project's deployment structure.

* fix(orbit-controls): added key to force re-render

* chore: release v5.0.0-next.6

* feat: add `traverse` option to model loaders (#635)

* feat: add `traverse` option to model loaders

* refactor: `Object3D` to `TresObject`

* refactor: `Object3D` to `TresObject`

* chore: cleanup old comments

---------

Co-authored-by: lihbr <[email protected]>

* fix: enhance audio and sprite loading logic

- Updated `PositionalAudio.vue` to ensure the audio buffer is valid before setting it, preventing potential runtime errors.
- Modified `AnimatedSprite/component.vue` to handle texture results more robustly, ensuring compatibility with both single and array texture results.
- Improved type annotations in `useFBX`, `useGLTF`, and `useSVG` loaders to provide clearer return types and enhance type safety.

These changes improve error handling and maintainability across audio and sprite components.

* chore: release v5.0.0-next.7

* feat: set peer @Tresjs/core to 5.0.0 and alpha, updated dev deps (#641)

* chore: release v5.0.0-alpha.0

* feat: enhance `useAnimations` composable with manual update option (#637)

- Renamed `useAnimation` to `useAnimations` for consistency.
- Added support for manual updates in the `useAnimations` composable, allowing users to control when the animation mixer updates.
- Updated documentation to reflect the new manual update feature and provided usage examples.
- Adjusted the implementation to utilize a computed property for the `AnimationMixer`, ensuring proper reactive updates.

These changes improve flexibility and control over animations in the TresJS framework.

* chore: release v5.0.0-alpha.1

* chore: update dependencies and package manager version

- Upgraded package manager from [email protected] to [email protected].
- Updated @Tresjs/core from version 5.0.0-alpha.1 to 5.0.0-rc.0.
- Bumped @types/three from 0.179.0 to 0.180.0.
- Updated three from version 0.179.1 to 0.180.0.
- Upgraded vite from version 7.1.3 to 7.1.6.
- Updated vue-tsc from version 3.0.6 to 3.0.7.

These changes ensure compatibility with the latest features and improvements in the respective packages.

* chore: release v5.0.0-rc.0

* chore: update dependencies and release v5.0.0

- Updated @Tresjs/core from version 5.0.0-rc.0 to 5.0.0.
- Bumped vue-router from version 4.5.0 to 4.5.1.
- Upgraded dev dependencies:
  - @tresjs/leches from ^0.14.0 to ^0.14.1
  - unplugin-auto-import from ^0.18.6 to ^20.1.0
  - unplugin-vue-components from ^0.27.5 to ^29.0.0
  - vite-plugin-glsl from ^1.3.1 to ^1.5.1
  - vite-plugin-qrcode from ^0.2.3 to ^0.3.0
  - vue-tsc from ^2.1.10 to ^3.0.7

These updates ensure compatibility with the latest features and improvements in the respective packages.

---------

Co-authored-by: andretchen0 <[email protected]>
Co-authored-by: Gerard del Castillo <[email protected]>
Co-authored-by: Lucie <[email protected]>
Co-authored-by: lihbr <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -1,5 +1,153 @@
 # Changelog
 
+## [5.0.0-rc.0](https://github.com/Tresjs/cientos/compare/5.0.0-alpha.1...5.0.0-rc.0) (2025-09-20)
+
+## [5.0.0-alpha.1](https://github.com/Tresjs/cientos/compare/5.0.0-alpha.0...5.0.0-alpha.1) (2025-09-06)
+
+### Features
+
+* enhance `useAnimations` composable with manual update option ([#637](https://github.com/Tresjs/cientos/issues/637)) ([b2b60e6](https://github.com/Tresjs/cientos/commit/b2b60e67aaa8d62012cf67f030acdb7c08c56a9a))
+
+## [5.0.0-alpha.0](https://github.com/Tresjs/cientos/compare/5.0.0-next.7...5.0.0-alpha.0) (2025-08-30)
+
+### Features
+
+* set peer @tresjs/core to 5.0.0 and alpha, updated dev deps ([#641](https://github.com/Tresjs/cientos/issues/641)) ([48817fd](https://github.com/Tresjs/cientos/commit/48817fdd092fb8b6658245160b6cacfac3cf2f3d))
+
+## [5.0.0-next.7](https://github.com/Tresjs/cientos/compare/5.0.0-next.6...5.0.0-next.7) (2025-08-11)
+
+### Features
+
+* add `traverse` option to model loaders ([#635](https://github.com/Tresjs/cientos/issues/635)) ([421350f](https://github.com/Tresjs/cientos/commit/421350fc7c3fca0806f61f21fe8bc765bf7d4589))
+
+### Bug Fixes
+
+* enhance audio and sprite loading logic ([4319fa9](https://github.com/Tresjs/cientos/commit/4319fa94e2578d5ed37ad381854984deeae9d17e))
+
+## [5.0.0-next.6](https://github.com/Tresjs/cientos/compare/5.0.0-next.5...5.0.0-next.6) (2025-07-31)
+
+### Bug Fixes
+
+* **orbit-controls:** added key to force re-render ([c93f6c1](https://github.com/Tresjs/cientos/commit/c93f6c18750dd1a3499ec85c89e9bd567edc6ae5))
+
+## [5.0.0-next.5](https://github.com/Tresjs/cientos/compare/5.0.0-next.4...5.0.0-next.5) (2025-07-08)
+
+### ⚠ BREAKING CHANGES
+
+* useFBX no longer returns the plain obj, it now returns an object with reactive data (state, isLoading, error) and a load method.
+
+- Updated `vue` to version `3.5.17` and `three` to version `0.178.0` in `package.json` for enhanced compatibility and features.
+- Upgraded `@vitejs/plugin-vue` to version `6.0.0` and `vite` to version `7.0.2` to leverage the latest improvements in the build process.
+- Enhanced the `useFBX` composable to provide a reactive state for loading FBX models, allowing for better handling of model properties and loading states.
+- Improved the `FBXModel` component to support shadow properties and added a new demo for better visualization of FBX model loading.
+- Updated documentation to reflect changes in the FBX model loading process and added examples for better clarity.
+
+* fix(TheModel.vue): remove unused type import for improved clarity
+
+- Removed the unused import of `Group` from TheModel.vue to enhance code clarity and maintainability. This change aligns with the ongoing effort to streamline type imports and improve type safety across the codebase.
+
+* feat: expose model state in useFBX and useGLTF components
+
+- Added `defineExpose` to both `useFBX` and `useGLTF` components to expose the reactive model state, allowing for better integration and access to the model instance in parent components.
+- This enhancement improves the usability of the components by providing a direct reference to the model state, facilitating more dynamic interactions and updates.
+
+* fix(useFBX): add missing comma in defineExpose for model instance
+
+- Added a missing comma in the `defineExpose` call within the `useFBX` component to ensure proper syntax and prevent potential runtime errors. This minor fix enhances code clarity and maintains consistency in the component's structure.
+
+### Features
+
+* refactor useFBX ([#628](https://github.com/Tresjs/cientos/issues/628)) ([d59ef26](https://github.com/Tresjs/cientos/commit/d59ef26ff9e1924c12188f458324b83f72196f96))
+
+## [5.0.0-next.4](https://github.com/Tresjs/cientos/compare/5.0.0-next.3...5.0.0-next.4) (2025-06-30)
+
+### Bug Fixes
+
+* create a local raycast for the HTML component ([#627](https://github.com/Tresjs/cientos/issues/627)) ([614505f](https://github.com/Tresjs/cientos/commit/614505fd84381919308136d510ffb69b805a5038))
+* **transform-controls:** use correct emit on mouse up ([#625](https://github.com/Tresjs/cientos/issues/625)) ([f04a63c](https://github.com/Tresjs/cientos/commit/f04a63cab66b9e0cc0fc17f7622944999c417787))
+
+## [5.0.0-next.3](https://github.com/Tresjs/cientos/compare/5.0.0-next.2...5.0.0-next.3) (2025-06-22)
+
+### Bug Fixes
+
+* typescript issues ([#624](https://github.com/Tresjs/cientos/issues/624)) ([3c1640e](https://github.com/Tresjs/cientos/commit/3c1640e512cd77f0f980a63d1aa9414d4cc4d608))
+
+## [5.0.0-next.2](https://github.com/Tresjs/cientos/compare/5.0.0-next.1...5.0.0-next.2) (2025-06-15)
+
+### Bug Fixes
+
+* adapt to renderer.isntance no longer being shallowRef ([430534a](https://github.com/Tresjs/cientos/commit/430534a40d37e44dc026facfe9a4faac461decab))
+* remove unused type import in MouseParallax.vue ([0899ecf](https://github.com/Tresjs/cientos/commit/0899ecfc0e02a7ded4b1368d5ad22dc352b1f1ce))
+* type issues from v5 ([bd0e0c6](https://github.com/Tresjs/cientos/commit/bd0e0c6abbe2616fb73d44171716fa54c2ac54b9))
+
+## [5.0.0-next.1](https://github.com/Tresjs/cientos/compare/5.0.0-next.0...5.0.0-next.1) (2025-06-15)
+
+## [5.0.0-next.0](https://github.com/Tresjs/cientos/compare/4.3.1...5.0.0-next.0) (2025-06-06)
+
+### ⚠ BREAKING CHANGES
+
+* cientos  is now ESM only
+
+- Added 'es' format to the Vite configuration for better module compatibility.
+- Removed the UMD globals section from the output configuration as it is no longer necessary, streamlining the build process.
+* useGLTF no longer returns the plain obj, it now returns an object with reactive data (state, isLoading, error) and a load method.
+
+- Refactored GLTF loading in components to use the updated `useGLTF` composable, improving state management and performance.
+- Removed unnecessary `Suspense` wrappers in demo components for cleaner rendering.
+- Added new demo components for showcasing GLTF model loading with DRACO compression.
+- Updated documentation to reflect changes in GLTF model usage.
+
+* fix: update import syntax and clean up unused code
+
+- Changed import statement for `TresObject` in `gltf-model.md` to use the correct TypeScript syntax.
+- Removed unused imports in `use-gltf/index.vue` for cleaner code.
+- Added ESLint directive to disable console warnings in `TheModel.vue` for development purposes.
+
+* docs: update useGLTF implementation and clean up components
+
+- Refactored components to utilize the new `useGLTF` structure, replacing direct access to nodes with reactive state management.
+- Removed unused imports and commented-out code for improved clarity and maintainability.
+- Updated documentation references to reflect changes in component usage and structure.
+
+* feat: adapt useAnimations to new useAsyncState loader's model
+
+- Added a new demo page for `use-animations` showcasing the animated GLTF model.
+- Refactored the `useAnimations` composable to support reactive animations using `MaybeRef`.
+- Updated the `TheModel.vue` component to utilize the new reactive state for animations.
+- Enhanced the main demo layout with `TresCanvas`, `OrbitControls`, and lighting for improved visualization.
+
+* chore: update @tresjs/core dependency to version 5.0.0-next.0
+
+- Changed the dependency for @tresjs/core in package.json and playground/vue/package.json to the stable version 5.0.0-next.0 from a previous URL reference.
+- Updated pnpm-lock.yaml to reflect the new version of @tresjs/core across all relevant sections.
+- Adjusted the useGLTF implementation in documentation to align with the new state management approach.
+
+### Features
+
+* 608 drop umd support ([#622](https://github.com/Tresjs/cientos/issues/622)) ([14afe95](https://github.com/Tresjs/cientos/commit/14afe95c3f0c1ae5fb5b6cc4b57d3f86b46f0f4b))
+* 609-refactor-usegltf ([#610](https://github.com/Tresjs/cientos/issues/610)) ([13943b0](https://github.com/Tresjs/cientos/commit/13943b0401a7f1d10723ae01659c6d8b50f04310))
+* 611 move cores usetexture to cientos ([#617](https://github.com/Tresjs/cientos/issues/617)) ([430377d](https://github.com/Tresjs/cientos/commit/430377d8d8a1b5e902167bc210e4f48b1141c300))
+* 615-adapt-camera-dependant-abstractions-to-core-v5-camera-changes ([#621](https://github.com/Tresjs/cientos/issues/621)) ([682d38f](https://github.com/Tresjs/cientos/commit/682d38f2a6366918a77aa7e8c312484582c62b8c))
+* 616-adapt-code-to-core-ctx-renderer-state-breaking-change ([#620](https://github.com/Tresjs/cientos/issues/620)) ([2ae981f](https://github.com/Tresjs/cientos/commit/2ae981f42fa6a76fad2202236b49c28f395dfb29))
+* **AccumulativeShadows:** add component, demo, docs ([#558](https://github.com/Tresjs/cientos/issues/558)) ([7e6b8d0](https://github.com/Tresjs/cientos/commit/7e6b8d0dbbe2f1f0500072815c86c2cf0c559a58))
+* **Bounds:** add component, demo, docs ([#408](https://github.com/Tresjs/cientos/issues/408)) ([#568](https://github.com/Tresjs/cientos/issues/568)) ([592ec68](https://github.com/Tresjs/cientos/commit/592ec68de83fcd5a62523b32b96ade825437ea68))
+* **CircleShadow:** add component, demo, docs ([#549](https://github.com/Tresjs/cientos/issues/549)) ([c0c1bcc](https://github.com/Tresjs/cientos/commit/c0c1bcc15743f0c93f8908b9e29d2555a4c79c85))
+* **CubicBezierLine:** add component, demo, docs ([#546](https://github.com/Tresjs/cientos/issues/546)) ([99c3a60](https://github.com/Tresjs/cientos/commit/99c3a60d5e99d25dcb65da1f04ccd4ce0499d919))
+* **Helper:** add component, demo, docs ([#543](https://github.com/Tresjs/cientos/issues/543)) ([63535a2](https://github.com/Tresjs/cientos/commit/63535a24689c5fb1353b26d2add7f899a74ada37))
+* **LOD:** add component, playground, docs ([#524](https://github.com/Tresjs/cientos/issues/524)) ([ef6438c](https://github.com/Tresjs/cientos/commit/ef6438c46d43d83ee6bf5d1b4e36a9a7e69c8297))
+* **MarchingCubes:** add component, demo, docs ([#553](https://github.com/Tresjs/cientos/issues/553)) ([2ebc1e6](https://github.com/Tresjs/cientos/commit/2ebc1e6c75107d6914b4ad3b7e8488b06f5db2f6))
+* **PointMaterial:** add component, demo, docs ([#545](https://github.com/Tresjs/cientos/issues/545)) ([4528f64](https://github.com/Tresjs/cientos/commit/4528f64063d2f9cc903cc9f21c8c09ef792b919a))
+* **QuadraticBezierLine:** add component, demo, docs ([#548](https://github.com/Tresjs/cientos/issues/548)) ([4a9f006](https://github.com/Tresjs/cientos/commit/4a9f006d5c318781d52f6e943b7c4f342a077667))
+* **ScreenQuad:** add component, playground, docs ([#530](https://github.com/Tresjs/cientos/issues/530)) ([34a3db5](https://github.com/Tresjs/cientos/commit/34a3db5162d084f9fc3db82885a271a1a8c31424))
+* **Stage:** add component, demo, docs ([#572](https://github.com/Tresjs/cientos/issues/572)) ([9db8c78](https://github.com/Tresjs/cientos/commit/9db8c782d434a33c64663f313bc289199281f4eb))
+* **useIntersect:** add function, demo, docs ([#550](https://github.com/Tresjs/cientos/issues/550)) ([b0ba621](https://github.com/Tresjs/cientos/commit/b0ba62159c4ae9b2e51f85dcad5c9fe8d03ff6e8))
+
+### Bug Fixes
+
+* fixes to next components and docs ([#586](https://github.com/Tresjs/cientos/issues/586)) ([bc54a1d](https://github.com/Tresjs/cientos/commit/bc54a1da5aa8e0f7c9852713c01d405b9f5eff29))
+* return nodes and materials computed directly ([#612](https://github.com/Tresjs/cientos/issues/612)) ([4fe342a](https://github.com/Tresjs/cientos/commit/4fe342aeb34741ce828ba1bed26279d00f9be9e7))
+* rollback to previous use tres usage ([#623](https://github.com/Tresjs/cientos/issues/623)) ([cfa38b1](https://github.com/Tresjs/cientos/commit/cfa38b1c88421430ab5204ae943443cc50e44dfe))
+
 ## [4.3.1](https://github.com/Tresjs/cientos/compare/4.3.0...4.3.1) (2025-05-16)
 
 ### Bug Fixes

docs/.vitepress/config.ts

@@ -1,5 +1,7 @@
-import { resolve } from 'pathe'
 import { defineConfig } from 'vitepress'
+import { resolve } from 'pathe'
+
+import components from '../component-list/components'
 
 const whitelist = ['TresCanvas', 'TresLeches', 'TresScene']
 
@@ -61,120 +63,8 @@ export default defineConfig({
           { 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: 'Edges', link: '/guide/abstractions/edges' },
-          { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
-          { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
-          { text: 'Mask', link: '/guide/abstractions/mask' },
-          { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
-          { text: 'ScreenSizer', link: '/guide/abstractions/screen-sizer' },
-          { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
-          { text: 'Outline', link: '/guide/abstractions/outline' },
-          { text: 'Image', link: '/guide/abstractions/image' },
-          { text: 'Billboard', link: '/guide/abstractions/billboard' },
-        ],
-      },
-      {
-        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: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-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: 'Align', link: '/guide/staging/align' },
-          { text: 'SoftShadows', link: '/guide/staging/soft-shadows' },
-          { text: 'Grid', link: '/guide/staging/grid' },
-        ],
-      },
-      {
-        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' },
-        ],
-      },
+      ...components,
+
     ],
 
     socialLinks: [

docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AccumulativeShadows, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :shadows="true">
+    <OrbitControls />
+    <TresMesh :position-y="0.3" :scale="0.4" :cast-shadow="true">
+      <TresTorusKnotGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <AccumulativeShadows
+      :blend="100"
+      color="#fbb03b"
+      once
+      :position-y="-0.4"
+    />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/BackdropDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Backdrop, GLTFModel, useProgress } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-
+import type { Camera } from 'three'
 import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
-import { ref, watch, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 
 const gl = {
   clearColor: 'pink',
@@ -13,21 +13,11 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
 }
 
-const model = ref(null)
-
-watch(model, ({ value }) => {
-  value.traverse((child) => {
-    if (child.isMesh) {
-      child.castShadow = true
-    }
-  })
-})
-
 const cameraRef = ref(null)
 
 watchEffect(() => {
   if (cameraRef.value) {
-    (cameraRef.value as THREE.Camera).lookAt(0, 5, 0)
+    (cameraRef.value as Camera).lookAt(0, 5, 0)
   }
 })
 
@@ -58,7 +48,6 @@ const { hasFinishLoading, progress } = await useProgress()
       />
       <Suspense>
         <GLTFModel
-          ref="model"
           path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
           :rotation="[0, 0.5, 0]"
           :position="[0, 0.4, 0]"