Estoy buscando una solución similar a esta: https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js / usando Three.js para mi proyecto.

Cuando implementé la demostración en mi entorno local y comencé a modificarla, me quedé atascado y no pude agregar un fondo en las partes del mouseover/hover, porque de alguna manera los objetos Three.js se colocan detrás del color de fondo.

Tenga en cuenta que esto funciona cada vez que cambio el color de fondo del cuerpo, pero tan pronto como intento agregar el color de fondo CSS a las clases subyacentes del cuerpo, los objetos Three.js desaparecen detrás de él.

Aplicar z-index a las clases img tampoco funcionó.

Lo siento, todavía soy muy nuevo en esto, pero me quedé atascado en este tema y no pude encontrar una respuesta adecuada.

Espero que alguien pueda ayudarme aquí,

Gracias.