How to create a texture transition like in the example?

I’m studying Three.js and I found this website: https://fibrotexusa.com/
Can you give me a hint of how to do the texture transition of the TetrahedronGeometry like in this website? I had the visual feeling that is a change of scene or texture based in some scroll trigger.

Using Wappalyzer I saw that the website was made using Webflow and Elementor.

Approaches:

  1. Postprocessing three.js examples
  2. Scissors three.js examples
1 Like

When you will be implementing similar project, don’t use ScrollTrigger, better make custom scrolling. Because, like you see in example which you provided, using this project on mobile ruins whole experience… Better now sacrificing a little more time to understand logic of scrolling without native scrollbar and don’t regret it later, than the other way around.

1 Like

Thank you!! Scissors seems to be a perfect solution!

Thank you for the advice, Lukaz!
I’ll invest more time understanding the logic of scrolling without native scrollbar.

Approach 3: discard, based on screen coords is an option too

1 Like

discard is a method? Or I create a logic to use dispose() based on screen coords?

It’s a keyword in glsl, thus, it’s about modified materials.
I’ll post the demo later.

1 Like

Oh! Ok, thank you a lot!
I started reading The Book of Shaders.

1 Like

Demo:

2 Likes

Woow! You’re insanely good at what you do!

Thank you a lot!!

1 Like