[ TUTORIAL ] THREEJS Particle System

⚡️Subscribe for updates: andersonmancin...
In this video, I show the process of how to create a threejs scene and turn any loaded model into a particle system. In addition, I also show you how to use a custom vertex shader to achieve the dot distortion effect.
Live: threejs-partic...
This scene was created using my threejs boilerplate, created in some previous videos where I demonstrate how to use it: • [ TUTORIAL ] How to us...
You can download the source code for this project for free here: github.com/ekt...
I hope you like it and that it helps you in some way on your journey with threejs too.

[@싸우지맙세효]

thanks bro

[@AndersonMancini]

This is my longest video until now. I hope that it is not too boring and that it might help you 😊.

[@ifecojahs8151]

Thank you so much. keep it up bro

[@adebayoileri]

Excited for this Anderson 💪🏼

[@javifontalva7752]

The longer the better!

[@charliewhitear7226]

hello, for some reason when i create the mouse distortion custom shader , the particles only move when my mouse is on the right side of the screen and not over the particles, as well as this only a small section of the particles on the model move, is there anyway you can help? Thanks

[@AndersonMancini]

Hey there ;). I think you might need to remap your mouse coordinates inside the shader using the vec2(-0.5).

[@vincentfretin]

Nice short video! Your video editing skills improved, I like it. I've just learned how to decimate a mesh, thank you!

[@AndersonMancini]

Thank you Vincent 😊. I do everything using iMovie only. I know how to use after effects, but it takes so much time hehe. IMovie has limitations, but it works 👍😁

[@irfansaeedkhan7242]

i was able to made skeleton using particles, then spread the particles all over screen and morph it back to skeleton but want to know how can i change the modal to be morphed into, mean everytime i want particle to morph into another modal, also mouse interaction particles, how to acheive that

[@AndersonMancini]

twitter.com/Mister_Prada/status/1734273139373208000?s=19 This is what you want right? You have the source code here. Basically, you convert your model position into arrays and those coordinates to ma eka mix between those positions.

[@irfansaeedkhan7242]

@@AndersonMancini thank you so much for your response, yes that's exactly what I want , you are the best man, thanks a million

[@hansmuster1936]

Hey Anderson, very cool outcome! For a student project of mine, I'd like to flash my webpage visitors with something similar (a model of my Uni building). I hired a fiverr creator to model the building as a .glb for me but when I use your code to render it in "particle-style", it doesn't quite look as nice as your skull. Would you mind helping me out? Thank you very much for uploading this tutorial and greetings from Switzerland, Rafael

[@AndersonMancini]

Hey rafael. Sorry for the long delay. I just saw your message now. Please reach me on Twitter DM that I can help you okay? All the best.

[@hichamwow7916]

Hi is it possible to use the same injection technic in R3F?

[@AndersonMancini]

Yes. But you also have other options like using CSM in r3f with makes everything easier

[@ahsanfarooqi5663]

Amazing

[@RandomGaming-je6yk]

Hey how do I make model move to right of screen?

[@AndersonMancini]

Hey. Do you mean how to make it to the right so you can write on the left? I just changed the camera position

[@RandomGaming-je6yk]

@@AndersonMancini yea I wanna make it like a hero section 3d model on right and text on left , I will try changing camera positions

[@ashutoshsharma1352]

Hey! Great video. Just had one thing in my mind, why didn't you use Points material for your geometry which is already there in Three.js?

[@AndersonMancini]

Hey there . I could do it, but to change the position using a glsl vertex shader would be different. I liked this approach because it is simple 👍🏻. Thank you very much for your visit

[@ashutoshsharma1352]

@@AndersonMancini Hey, thanks for the reply. Can you please refer me some good source for learning glsl and shaders? I have learnt the basics of Three.js but when it comes to glsl and writing custom shaders, I don't have any knowledge about it.

[@AndersonMancini]

Hey man. Good question . I guess this will help other people too. So, there are some great courses on awwwards website and also udemi about shaders and glsl. I would recomend the nik lever coursewww.udemy.com/course/learn-glsl-shaders-from-scratch/ I learned all I know by watching those classes and also the yuri Abella channel. And by playing with shadertoy a lot. Took me a while to understand how to transport all the shader toy code to threejs scenes, but once I understood that, this opens a world ofpossibilities, because you can use shaders both as textures or as post peocessing passes, to create things like a sketch like rendering effect inside threejs with post processing. You can learn how to it here: r105.threejsfundamentals.org/threejs/lessons/threejs-shadertoy.html I hope this might help you on your journey ✌🏼😊

[@ashutoshsharma1352]

@@AndersonMancini Hey man, thanks for the reply, and I would surely look into these. Thank you so much

[@ifecojahs8151]

nice guide, but the text is super duper tiny, I cannot see anything

[@AndersonMancini]

Thank you. Noted. My monitor resolution is huge and takes me a lot of work to record these videos of the process while doing it. I'll try to make the font size bigger next time 👍🏻😁

[@ifecojahs8151]

@@AndersonMancini thanks 👍😊

[@CosyStudios]

Do you listen to this euro madness whilst coding?! x

[@AndersonMancini]

Hey there hehe. 😁. I don't know about it. What is this "euro madness"? 🤔

[@CosyStudios]

@@AndersonMancini haha forgive my apparent meanness my friend. Maximum respect for your work, but I just meant the choice of soundtrack was a bit much! Good captions though so went straight for mute!

[@AndersonMancini]

Heheh. I always choose a music before start coding a experience. Music guide my intuition and choices 😁. Thanks for your visit and kind word 🙏🏻

[@Francois3k]

I'm mad pump 😤

[@AndersonMancini]

Why bro? Hehrhe

[@Francois3k]

@@AndersonMancini it because ur one of the few threejs developers on KZbin that shows the 👌 work and show I u did it in shortest amount time. Man that y I said in past Masterclass man

[@AndersonMancini]

Thank you a lot man 😁👍🏻. This is the idea. Keep the videos under 5 minutes heheh.

[@CosyStudios]

@@Francois3k well said Micheal. Short and sweet. I often find i go straight for a code link in you tube videos and just read the code but Anderson's videos are to the point and easily digestible