MouseParallax

<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.

<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