fix: update html component and fix related issues
#640
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…edupdates-props feat: 17 reactive 3dtext with needupdates props
* 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 * chore: lint * refactor: remove unused function argument * feat: deconstruct points material imports --------- Co-authored-by: alvarosabu <[email protected]>
* 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 * docs: revert broken link
Co-authored-by: alvarosabu <[email protected]>
* 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 * refactor(Bounds): useScreenSize -> useResize * refactor(Bounds): rename variables, remove unneeded state * docs: fix material items merge issue --------- Co-authored-by: alvarosabu <[email protected]>
* feat(CircleShadow): add component, demo, docs * docs(CircleShadow): fix prop name --------- Co-authored-by: alvarosabu <[email protected]>
* 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]>
Co-authored-by: Alvaro Saburido <[email protected]>
Co-authored-by: alvarosabu <[email protected]>
- 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.
* 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
- 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!: 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.
* feat: return nodes and materials computed directly * docs: correct lint issues in markdown and update latest changes of useLoader
* 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.
…es (#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.
* 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.
- 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.
* 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(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.
… 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.
…VG 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.
… 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.
- 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.
- 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.
- 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.
- 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.
- 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.
* 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]>
- 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.
- Added `invalidate` support from useLoop V5 - Fixed vertexShader bug (see #587) - Fixed model integration (see #626) - Fixed `occlude="blending"` support - Implemented functional props: Prepend, Calculate custom position, and Fullscreen - Added examples and documentation improvements - Refactored parts of the code to align with core package V5
commit: |
There was a problem hiding this comment.
Pull Request Overview
This PR modernizes the Html component to be fully compatible with TresJS core V5, introducing significant improvements in functionality and documentation. The migration required substantial code refactoring to align with the evolution of the core package.
- Added
invalidatesupport fromuseLoop V5for better rendering performance - Fixed critical bugs including vertexShader issues and model integration problems
- Enhanced occlusion blending support with custom materials and geometry options
Reviewed Changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/core/misc/html/HTML.vue |
Major refactoring of the main component with V5 compatibility updates, new props, improved occlusion handling, and better lifecycle management |
src/core/misc/html/utils.ts |
Renamed calculatePosition function to defaultCalculatePosition for consistency |
src/core/misc/html/shaders/passthrough-vertex.glsl |
Added new passthrough vertex shader for transform mode |
src/core/misc/html/shaders/fragment.glsl |
Updated fragment shader color output from transparent black to transparent white |
playground/vue/src/pages/misc/HTMLDemo.vue |
Comprehensive demo enhancement with multiple occlusion examples, transitions, and custom materials |
playground/vue/src/pages/misc/html/Card.vue |
New reusable card component for HTML demos |
playground/vue/src/pages/misc/Card.vue |
Removed old card component |
docs/guide/misc/html-component.md |
Extensively updated documentation with new examples, detailed prop descriptions, and usage guidelines |
| Multiple demo components | Added comprehensive examples for various HTML component features including transitions, occlusion modes, and blending |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Comment on lines
179
to
184
| else { | ||
| el.value.style.zIndex = null! | ||
| el.value.style.position = null! | ||
| el.value.style.pointerEvents = null! | ||
| // Avoids z-index conflicts when mixing occlusion blending with regular objects | ||
| // target.style.zIndex = null! | ||
| // target.style.position = null! | ||
| // target.style.pointerEvents = null! | ||
| } |
There was a problem hiding this comment.
The else block contains only commented code which suggests incomplete implementation. Either implement the functionality or remove the empty else block to avoid confusion.
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Hey @damienmontastier leftover?
Comment on lines
+208
to
+218
| if (!occlude.value) { | ||
| const halfRange = Math.floor(zIndexRange.value[0] / 2) | ||
| const zRange = occlude?.value | ||
| ? isRayCastOcclusion.value | ||
| ? [zIndexRange.value[0], halfRange] | ||
| : [halfRange - 1, 0] | ||
| : zIndexRange.value | ||
| el.value.style.zIndex = `${zRange[0]}` | ||
| } |
There was a problem hiding this comment.
Logic error: The condition checks if (!occlude.value) but then inside the block uses occlude?.value which will always be falsy due to the outer condition. This code block will never execute the conditional logic properly.
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
@damienmontastier Copilot is right here could you please check it?
Comment on lines
+391
to
401
| if ((isOrthographicCamera && geometry.value) && attrs.scale) { | ||
| if (!Array.isArray(attrs.scale)) { | ||
| occlusionMeshRef.value.scale.setScalar(1 / (attrs.scale as number)) | ||
| } | ||
| else if (attrs.scale instanceof Vector3) { | ||
| occlusionMeshRef.value.scale.copy(attrs.scale.clone().divideScalar(1)) | ||
| } | ||
| else { | ||
| occlusionMeshRef.value.scale.set(1 / attrs.scale[0], 1 / attrs.scale[1], 1 / attrs.scale[2]) | ||
| } | ||
| } |
There was a problem hiding this comment.
Line 396 uses divideScalar(1) which has no effect. This should likely be divideScalar with a meaningful divisor or use a different operation to achieve the intended inverse scaling.
Copilot uses AI. Check for mistakes.
Comment on lines
+418
to
420
| // TODO: Create factor value (1 / sizes.factor) | ||
| // Ratio of canvas pixels to Three.js world units (size.width / viewport.width) | ||
| const ratio = 1 / 1 |
There was a problem hiding this comment.
The ratio calculation 1 / 1 is hardcoded and the TODO comment indicates this needs proper implementation. This could lead to incorrect scaling behavior.
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
@damienmontastier why is hardcoded?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR modernizes the Html component to be fully compatible with core V5.
The migration required a partial rewrite of the code and documentation.
invalidatesupport fromuseLoop V5occlude="blending"Related Issues
Local Playground —
pnpm run playgroundLocal Documentation —
pnpm run docs:devNotes / Feedback
<Html>elements may shift unexpectedly on the X and/or Y axis<Html>: #596 — refs are not initialized because the content is rendered outside the Vue tree (custom Tres renderer).