Parallax mouse effect (Vue + Three.js)

Hola, Este es el segundo post de Vuejs+ threeJS

• Si no has visto el primer post donde creamos un template te lo recomiendo, usaremos el template creado como base para este post

Link creacion del template

Esta vez añadiremos de manera sencilla un simple efecto parallax controlado por el mouse que se verá así:

En realidad es bien sencillo, vamos a añadir el movimiento a la cámara.

Nota: Como el efecto es fácil de implementar, seguiremos trabajando en el app.vue pero siéntete libre de crear otro composable, cambiar nombres etc.

Capturando el movimiento del mouse

La primera parte es muy sencillo ya que vueUse nos da un composable que podemos usar, es el useMouse

import { useWindowSize, useMouse } from "@vueuse/core";
...
const { x, y } = useMouse();
...

Podemos colocar un log dentro del nuestro watchEffect para asegurarnos que esté funcionando

Ahora si actualizamos nuestra cámara con estos valores, va a ser un caos, por lo que necesitamos convertirlos, para esto creamos dos variables nuevas usando el computed

...
const { width, height } = useWindowSize();
const aspectRatio = computed(() => width.value / height.value);
const { x, y } = useMouse();

const cameraX = computed(() => x.value / width.value -0.5);
const cameraY = computed(() => -(y.value / height.value -0.5));
...

Dividiremos el valor del mouse por el valor de la pantalla, el eje X entre el width y el eje Y entre el height (valores que ya tenemos capturados del tutorial anterior

Ahora si te fijas bien en la cameraY es diferente de cameraX, estamos imprimiendo un valor negativo, esto lo hacemos para invertir el valor que viene por defecto del evento mouse movement (recordemos que lo que deseamos es que si el mouse va para abajo nuestra cámara se vaya para abajo y la vista suba)

Y además tenemos un - 0.5, los valores normales del mouse van a hacer de entre 0 y 1. Pero nosotros necesitamos que sean de entre -0.5 a 0.5 y sin mucha ingeniería, restamos el valor 🙂

Actualizando la cámara

Si vienes de la primera lección, tenemos nuestra función tick() donde colocaremos nuestro efecto.

Lo siguiente es super sencillo, recordemos que la cámara es un object3D y por lo tanto tiene ciertas propiedades comunes, una de ellas es la posición.

podemos acceder a ellas solo debemos colocar que propiedad queremos modificar y que eje (recordemos x,y,z)

const tick = () => {
...
camera.position.x = cameraX.value;
camera.position.y = cameraY.value;
...

Ahora si deseas ampliar el limite puedes tomar y multiplicar el valor de camera.value y encontrar el que mejor se ajuste a tu escena

¡Listo!

Así de simple tenemos un bonito efecto que queda muy bien en muchas combinaciones. Esto también se hace muy simple cuando tenemos un template robusto

Por último invitarte separar esta lógica y crear un nuevo composable 🙂