THREE JS: image RGB Split / Distortion On Scroll
HTML-код
- Опубликовано: 15 сен 2024
- Hi guys,
back with another video where we will be using Three JS and Shaders to implement an RBG Split / distortion effect when we scroll the page.
Thanks for watching.
Code here: github.com/con...
Conor
Wow why didn't I encounter this channel early.. that is some premium content bro good work !!
I watched three journey and Yuri Artyukh's course and I have to say doing this code along helped me so much hence I generally suck at javascript especially when it comes to OOP. The effect is also something I wanted to know ho to do for a while now and I was quite sad it wasn't in any of these top guru's courses. Thank you Conor.
Nice one mate. Yeah I love this effect as well. Some of this shader stuff can be quite hard to grasp in my opinion. Seems to be a lot of maths involved which I’m not very good at haha. A lot of tutorials online seem to really overcomplicate this stuff as well in my opinion so I try to keep it as simple as I can. I find the OOP principles good for this kind of stuff as it makes the code a lot more reusable. Have you seen any other effects you like? I’ll try to give it a go for a future video. Cheers mate.
@@ConorBailey I'm trying to replicate the image effects on firstborn.com. Yuri Shows how this scroll based sticky animation works but then again doesn't apply the rgb split, so thanks to you now I know how it looks like in the shader code. Your style of teaching is much more understandable and you break down these concepts very well. So glad I discovered your channel!
amazing! been trying to do this for awhile but couldnt figure it out, thanks so much! please more three js tutorials
Thanks mate. Glad it helped. More three js / webgl stuff on the way! 👍
Don't know if I'd use this particular effect, but the library is definitely very interesting. Good work.
Keep it up, mate, you are doing a fantastic job here. Thanks for the tut! ;)
Очень грамотные видео, с хорошей подачей материала! Молодец, так держать! Very cool video!
Thank you!
Thank you SO much, i didn't even started the tutorial yet but i desperately searched (for months) for a similar effect as the one from Jantanna Hennard's portfolio.(pe pictures turn into a wave when you scroll)
Wow thanks so much mate! Glad this helped you! Let me know if you have any issues with the code. I have a cool pixelated shaders effect video coming out soon!
@@ConorBailey can you actually help me with a problem? it might sound dumb: " Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". " it gives me this error at the import, can you tell me how can i solve it?
@@vladropotica5687 are you running the code with parcel? Have you also installed three using node js?
@@ConorBailey i have "three" in package.json, i installed parcel with "npm install -g parcel-bundler, but after that i didn't write "npm init -y", is that the problem?
@@vladropotica5687 try running 'npm i' in the terminal which should ensure all packages are installed.
Also ensure that you have the 'module' attribute for your javascript reference in your html file. so it should be ' '
Then try running 'npx parcel index.html'
This should then spin up the app on a local server (port 1234).
Cool effect. Thank you for sharing your skills.
Does anyone told you today that you are a legend
Any chance you can remake this tutorial with React-Three-Fiber? I love the react way of developing so it would be great to see how to achieve this in R3F
Honestly I would love this aswell, React-Three-Fiber is getting more and more adopted!
This is way past cool man! Thanks for sharing
Hey - thank you so much for the tutorial. Is there any way to have such a distortion effect without the RGB split? Just like a bezier curve warp when scrolling up and down :)?
Thank you for your awesome tutorial😍 One problem: when the mesh and image are in different aspect ratio, The texture got stretched/squezed. Can you please help me with any solution for that?😍
Thanks Conor! Works perfectly
Nice one mate!
keep it up mate cool glitch effect
Hi,
Quick question. Could you get the mesh effect to happen on a timer rather than on scroll?
Please more three js tutorials..
You published a project that only worked for 3 years or so. As of now, even if I clone your repo, it doesn't show images nor does it scroll.
Are you running the project with parcel? Should still work…
I didnt understand the offset part at around 42:00 😢
I’ll look into this and get back to you mate. Been a while since I’ve experimented with three js tbh so will need to remind myself.
How to add this effect on locomotive scroll library?
Please help
Love it!
Amazing!
Awesomeeeeee.....
Is it possible to do this in WordPress !? Thanksss
Looking to achieve this effect since howwww long ! Thanks a lot ! Is there someone who knows how to add this effect with elementor pro as site builder ?
"Uncaught SyntaxError: import declarations may only appear at top level of a module" i don't understand, i follow your code until the end ... He didnt work --'
after that - github copy - and not run ! --'
Hi mate. Are you running this with parcel?
@@ConorBailey --' yes he run ! really thanks !