CientosMouseParallax
<MouseParallax /> is a component that allows you to easily create a parallax effect. The camera will update automatically according to the mouse position.
Usage
You only need to import it and add it to your template as <MouseParallax />. Additionally, you can pass the following props:
factor is a number to increase the movement range of the camera. ease is a number that smoothes the movement. You can also disable the effect with the disabled prop.
vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { MouseParallax, TorusKnot } from '@tresjs/cientos'
</script>
<template>
<TresCanvas clear-color="#82DBC5">
<TresPerspectiveCamera
:position="[0, 0, 7.5]"
:fov="75"
/>
<TorusKnot>
<TresMeshNormalMaterial />
</TorusKnot>
<MouseParallax
:factor="5"
:ease="3"
/>
</TresCanvas>
</template><script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { MouseParallax, TorusKnot } from '@tresjs/cientos'
</script>
<template>
<TresCanvas clear-color="#82DBC5">
<TresPerspectiveCamera
:position="[0, 0, 7.5]"
:fov="75"
/>
<TorusKnot>
<TresMeshNormalMaterial />
</TorusKnot>
<MouseParallax
:factor="5"
:ease="3"
/>
</TresCanvas>
</template>Props
| Prop | Description | Default |
|---|---|---|
| disabled | Enable or disable the effect | false |
| factor | Increase the range of the parallax | 2.5 |
| ease | Increase the camera movement speed | 0.1 |