nemutas / ghost-veil

About

In this application, the 'threejs plane' is overlaid on the 'dom element' to apply a special effect.

https://nemutas.github.io/ghost-veil/

Making

This application is made up of three layers.

1. dom layer

In this layer, the image is displayed and animated in response to scrolling using the GSAP Scroll Trigger.

2. plane layer (threejs canvas)

In this layer, the image source is obtained from the image element of the dom layer, and a grayscale texture is pasted onto the Plane.
In addition, depending on the degree to which the image is displayed, it was expressed as if it were coming down like a dark curtain.

3. postprocessing layer (threejs canvas)

In this layer, the UVs of the screen are distorted and also made transparent in response to mouse movements.

Technology

• Three.js
• TypeScript
• GLSL
• GSAP

Reference

• Yudouhu Portfolio - created by itoh
• Alien.js - flowmap - created by Patrick Schroen
• WLOP's excellent works

License

This source code is not MIT License.

❌ Commercial use is prohibited.
❌ Redistribution is prohibited.
❌ Diversion is prohibited.（Incorporate all of the code into the project, etc.）
✅ You can look at the application and reproduce the representation.
✅ You can use parts of the code.