fix: update html component and fix related issues

CHANGELOG.md

@@ -1,5 +1,139 @@
 # Changelog
 
+## [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]"

docs/.vitepress/theme/components/BakeShadowsDemo.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
 import { BakeShadows } from '@tresjs/cientos'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { TresCanvas } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
 const cubeRef = shallowRef()
 
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
+function onLoop({ elapsed }: { elapsed: number }) {
   if (cubeRef.value) {
     cubeRef.value.rotation.y = elapsed * 0.5
     cubeRef.value.rotation.x = elapsed * 0.5
   }
-})
+}
 </script>
 
 <template>
   <TresCanvas
     clear-color="#82DBC5"
     shadows
+    @loop="onLoop"
   >
     <TresPerspectiveCamera
       :position="[0, 2, 5]"