feat: camera shake #642
Open
feat: camera shake #642
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.
* 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.
commit: |
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.
CameraShake
This component provides an abstraction of a noise-driven camera motion system,
<CameraShake />is specifically designed for adding natural camera shake to the active camera.It enhances the immersive quality of a scene by simulating handheld movement, footsteps, impacts, or engine vibrations.
make-default)Local Playground —
pnpm run playgroundLocal Documentation —
pnpm run docs:dev