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. This could be an array of two values corresponding to the x and y values, in that order: :factor=[x,y].

ease is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: :ease=[x,y].

local is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.

<script setup lang="ts">
import { MouseParallax, TorusKnot } from "@tresjs/cientos";
import { TresCanvas } from "@tresjs/core";
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[0, 0, 7.5]" :fov="75" />
    <TorusKnot>
      <TresMeshToonMaterial color="orange" />
    </TorusKnot>
    <MouseParallax :factor="5" :ease="[3, 0.1]" />
    <TresAmbientLight />
    <TresDirectionalLight :position="[0, 2, 4]" />
  </TresCanvas>
</template>

Props