Working with Three.js Particle Systems - They're AWESOME!

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ธ.ค. 2024

ความคิดเห็น • 107

  • @DesignCourse
    @DesignCourse  3 ปีที่แล้ว +49

    Enjoying the Three.js content? Subscribe up for more!

    • @moizkhalid2714
      @moizkhalid2714 3 ปีที่แล้ว

      Love your Three.js content

    • @Giovanni00831
      @Giovanni00831 3 ปีที่แล้ว +1

      can I ask, I don't find the cross.png there is a link?

    • @chaseray3592
      @chaseray3592 3 ปีที่แล้ว

      A tip : watch movies on Kaldrostream. Me and my gf have been using them for watching all kinds of movies during the lockdown.

    • @mosessamuel6918
      @mosessamuel6918 3 ปีที่แล้ว

      @Chase Ray Yea, I have been watching on KaldroStream for since november myself :)

    • @tasya_nabila
      @tasya_nabila 3 ปีที่แล้ว

      I can't run the npm i and npm run dev. I kept getting error 😭

  • @Asuuri
    @Asuuri 3 ปีที่แล้ว +16

    The three.js Series is so amazing😍👍🏻

  • @romankonecny7106
    @romankonecny7106 ปีที่แล้ว +1

    And it all comes back down to a donut, the holy grail of frontend programming

  • @michaelvaughan2888
    @michaelvaughan2888 2 ปีที่แล้ว +1

    seriously the best tutorial on particles, and trust me, I watched a lot of them because I was having a tough time getting mine to work how I wanted, this tutorial is top knotch!

  • @guillermomedel1575
    @guillermomedel1575 3 ปีที่แล้ว +3

    32 minute video. Yet it takes me 2 hours to finish since I stare if into the particles. Good stuff

  • @Ryskorrel
    @Ryskorrel 3 ปีที่แล้ว +2

    18:28 not necessarily 60 times a second. It is more dependant on your screen refresh rate.
    This is why a lot of libraries include a wrapper for this which provides a delta time since the last repaint.

    • @jituraiyan
      @jituraiyan ปีที่แล้ว

      It'll depend on the device capacity... So, if your device has higher capacity then higher FPS wouldn't be a problem. On the other hand for low config device, the fps will be lower automatically... Also for updating staff, he uses clock so that the animation don't go faster/slower depending on the device's fps capacity.

  • @Frankslaboratory
    @Frankslaboratory 3 ปีที่แล้ว +3

    I love particle systems, looking forward to see what you do with it, will watch later today

    • @stanleychukwu7424
      @stanleychukwu7424 3 ปีที่แล้ว

      frankieeeee is here, big fan of yours man!!! subscribed to your channel and learning alot, actually learning tons from you! you rock Frank!!!

  • @Giovanni00831
    @Giovanni00831 3 ปีที่แล้ว

    I need more! I'm studying that at the university but now finally I'm learning something!

  • @dooza
    @dooza 2 ปีที่แล้ว

    How perfect that I discovered this video! I was literally thinking of making a particle donut as a background for my website.

  • @alexanderbarrera9906
    @alexanderbarrera9906 3 ปีที่แล้ว +1

    This is exactly what I was looking for to prettify a little solar system in my portfolio. Thank you good sir!

  • @pavan4917
    @pavan4917 3 ปีที่แล้ว

    Thank you Sir. I have never seen like this videos onThree.js.👌🏻

  • @먐먐-m1g
    @먐먐-m1g 2 ปีที่แล้ว +1

    I managed to make a animating text!! Thank you! 😆

  • @theshredguitarist25
    @theshredguitarist25 3 ปีที่แล้ว +2

    How do we replace the cross.png with a different png?

  • @mariaprincesss3111
    @mariaprincesss3111 3 ปีที่แล้ว

    Thank you! This is very helpful. Looking forward for more Three.js tutorials! :)

  • @parthapratimchoudhury1332
    @parthapratimchoudhury1332 3 ปีที่แล้ว

    Please provide more three js content.your contents are amazing

  • @rukkiecodes
    @rukkiecodes 3 ปีที่แล้ว +1

    Can't wait for the next one

  • @neomarkdigitalsolutions1646
    @neomarkdigitalsolutions1646 2 ปีที่แล้ว

    Wow - I learned a ton, thank you so much for sharing!

  • @ranzen2269
    @ranzen2269 3 ปีที่แล้ว

    Thank you a lot, I'm learning this library thanks to you, maybe later I''mma doing my own tutorial to the Spanish community

  • @timr86868
    @timr86868 3 ปีที่แล้ว +6

    There's a logic error with the code that rotates the particle system. ElapsedTime continually grows as the program runs, so if you leave it running for a few minutes, even a small mouse movement makes the system rotate ridiculously fast.
    I solved this by changing stuff around to use clock.getDelta() instead of clock.getElapsedTime()
    particlesMesh.rotation.y -= (((mouseY + 100) * 0.0002) * deltaTime)
    Not the exact same effect, but it doesn't change over time. If anyone has a better solution, please do let me know.

    • @shrutigupta445
      @shrutigupta445 3 ปีที่แล้ว

      Appreciate this!

    • @quintonnistico9347
      @quintonnistico9347 3 ปีที่แล้ว

      I saw your comment thanks. Can you paste the code snippet exactly how you put it? I tried replacing "elapsedTime" with "deltaTime" as well as replacing "clock.getElapsedTime()" with "clock.getDelta" but it doesn't rotate passively at all.

    • @timr86868
      @timr86868 3 ปีที่แล้ว +1

      @@quintonnistico9347 you also need to change the line that changes the rotation to use a += or -= instead of an = since we're now using delta time (which should stay roughly the same each frame) you have to add it to the previous value (hence += or -= depending on whether you want it to rotate left or right)

    • @nishitsarvaiya1474
      @nishitsarvaiya1474 3 ปีที่แล้ว +3

      @Tim Wolf Hi Tim. Thanks for providing us this solution.
      I added some modifications of my own to make 2 things =>
      1. Run the initial rotation only once in the beginning.
      2. Be able to move the particles in all the 4 directions in the same speed.
      Code =>
      let mouseX = 0,
      mouseY = 0, flag = 0;
      function moveParticles(e) {
      mouseX = e.clientX / canvas.width * 20 - 10;
      mouseY = e.clientY / canvas.height * 20 - 10;
      flag = 1;
      }
      const tick = () => {
      const deltaTime = clock.getDelta();
      if(flag == 0) {
      particlesField.rotation.y += deltaTime * 0.05;
      }
      particlesField.rotation.x -= mouseY * deltaTime * 0.008;
      particlesField.rotation.y -= mouseX * deltaTime * 0.008;
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
      };
      Here is my Codepen link you can check it out if you want. codepen.io/nishit-sarvaiya/full/gORPjwR

    • @omadden234
      @omadden234 3 ปีที่แล้ว +1

      @@nishitsarvaiya1474 this worked for me! thanks!

  • @thelud400
    @thelud400 3 ปีที่แล้ว +2

    It would be so cool to mix particles and some noise/random movements

  • @lundfoci
    @lundfoci 3 ปีที่แล้ว

    Thank you! This is an awesome and easy to follow tutorial. Learned a lot from it.

  • @tunahanergul9945
    @tunahanergul9945 11 หลายเดือนก่อน

    how can I add a background image to an 3d object

  • @jasonkarjadi4034
    @jasonkarjadi4034 3 ปีที่แล้ว

    I wonder if there will be a course for custom shaders

  • @theman7050
    @theman7050 2 ปีที่แล้ว

    Would using instancedBufferGeometry have further improved performance here?

  • @MarcioMarquesdeSouza
    @MarcioMarquesdeSouza 2 ปีที่แล้ว

    Extremely useful and well done. Thanks a lot!!!!!

  • @ronolds6505
    @ronolds6505 7 หลายเดือนก่อน

    I downloaded using npm and when I opened the HTML file no torus was on the screen. So, I downloaded the ZIP file and the same thing happened. Not sure what I'm missing. ??

  • @orsbert
    @orsbert 2 ปีที่แล้ว

    The keyboard sounds are satisfying

  • @LeftClickMage
    @LeftClickMage 5 หลายเดือนก่อน

    Using elapsed time makes the particles move faster the more time that passes.

  • @benjamingaboury897
    @benjamingaboury897 3 ปีที่แล้ว

    So interesting! I love ThreeJs 😍👍🏻

  • @khadimhusen
    @khadimhusen 3 ปีที่แล้ว +3

    Please use bigger font so we can see it.

    • @CanDooper
      @CanDooper 3 ปีที่แล้ว +1

      Agree, VS code seems a bit blurry in this vid so hard to read

  • @andrealiu5106
    @andrealiu5106 2 ปีที่แล้ว

    Is there an advantage to adding GSAP CDN and code in html vs the js file?

  • @rukkiecodes
    @rukkiecodes 3 ปีที่แล้ว

    About time. I waited so long for this.
    Keep it coming 😏😏😏😏

  • @amrikmalhans
    @amrikmalhans 3 ปีที่แล้ว

    Please keep this going

  • @mariaklimenko6090
    @mariaklimenko6090 2 ปีที่แล้ว

    love your chanel, thank you!!!!!😍

  • @edenmyson6401
    @edenmyson6401 3 ปีที่แล้ว

    Hey, could someone explain to me why at 12:07 using " - 0.5" places the points on the center of the screen?
    I really like all the topics of your videos, but I find there is sometimes little or no explainations

    • @catalin1122
      @catalin1122 3 ปีที่แล้ว

      Math.random() gives you a float value between 0.0 and 1.0. He substracts 0.5 to have a value in the -0.5 to 0.5 range because the origin is in the middle of the torus.

    • @edenmyson6401
      @edenmyson6401 3 ปีที่แล้ว

      @@catalin1122 thanks a lot! Love the escape the fate pic heh

    • @catalin1122
      @catalin1122 3 ปีที่แล้ว

      @@edenmyson6401 you're welcome. Love your synthwave pic as well!

  • @kiranwicksteed3972
    @kiranwicksteed3972 3 ปีที่แล้ว

    Great Tut. What if I have an existing project and want to use this on one of my existing pages. Is this possible?

    • @kiranwicksteed3972
      @kiranwicksteed3972 3 ปีที่แล้ว

      Manually imported dependencies if anyone else is wondering

  • @stanleychukwu7424
    @stanleychukwu7424 3 ปีที่แล้ว

    you're a great teacher!!!! thank you!!!

  • @quintonnistico9347
    @quintonnistico9347 3 ปีที่แล้ว +1

    I ran into a strange issue! When I do: if (mouseX > 0) {
    particlesMesh.rotation.x = mouseY * (elapsedTime * 0.00004)
    particlesMesh.rotation.y = mouseX * (elapsedTime * 0.00004)
    }
    What happens is the mouse rotation of particlesmesh speeds up over time. It starts really slow, but as time goes on it gets faster and faster. Any ideas?

    • @timr86868
      @timr86868 3 ปีที่แล้ว

      Check out my comment above.

  • @GH4L
    @GH4L 3 ปีที่แล้ว +2

    by any chance does/can anyone send me a link of the cross.png file he used for this project? i can't find any good quality ones online. the one i am currently using is a little blurry/opaque. would greatly appreciate it

    • @unrecited
      @unrecited 3 ปีที่แล้ว

      so yours actually loaded???? I dont get it smh

  • @Naval_Vanguard
    @Naval_Vanguard 2 ปีที่แล้ว

    Great job ! Can you do a tutorial to explain how to interact with particules on an image ?

  • @matthewstorey3320
    @matthewstorey3320 3 ปีที่แล้ว

    does anyone have a github with the full version of this? Ive been over mine a few times and it still doesnt work, mainly when adding the if statement for the animation.

  • @loveuketoo
    @loveuketoo 3 ปีที่แล้ว

    Thanks for the tutorial, one quick question:
    I've used the particles for a background for a scrolling web-page. How do I prevent the page from being able to scroll upwards for eternity?
    Have tried a conditional on the mousewheel, but it makes the scrollbar get stuck at the top.

  • @lennartv.1529
    @lennartv.1529 3 ปีที่แล้ว

    The CSS/HTML part at the end isnt working for me. Only the line is visible. I cant figure out why...

    • @lennartv.1529
      @lennartv.1529 3 ปีที่แล้ว

      Does it still work with the newer gsap version?

  • @SpriteTheDude
    @SpriteTheDude 2 ปีที่แล้ว

    great tutorial, thanks !

  • @mayursmahajan
    @mayursmahajan 3 ปีที่แล้ว

    how can I make this movements for the particlsesMesh more smoother
    BTW absolutely Love your content! Lots of Love from India

  • @Rhidayah
    @Rhidayah ปีที่แล้ว

    Blender Guru,, proud of your donut

  • @seanastro5549
    @seanastro5549 3 ปีที่แล้ว

    Some very nice effects, thanks ! Would love to see some text exploding into particles or vice versa.

  • @vitusstockholm4984
    @vitusstockholm4984 2 ปีที่แล้ว +1

    would be great if smbd could share cross.png file,

  • @P8860
    @P8860 3 ปีที่แล้ว

    Do you recommend using shaders or GSAP for animation?

    • @DesignCourse
      @DesignCourse  3 ปีที่แล้ว +1

      I recommend using both, depending on the objective. So, it all depends on what the goal is!

  • @safdarawn902
    @safdarawn902 3 ปีที่แล้ว +1

    which theme for vs code are you using please bro if anybody knows reply me thanks in advancde :D

  • @ayanali6740
    @ayanali6740 3 ปีที่แล้ว

    make a series on react-three-fiber

  • @pranaykrmajee1432
    @pranaykrmajee1432 3 ปีที่แล้ว +1

    where is the cross.png ? :")

  • @cdey3886
    @cdey3886 3 ปีที่แล้ว

    niceeeee that would look great on my website

  • @arkondigital1496
    @arkondigital1496 2 ปีที่แล้ว

    11:43 I can feel your pain bro

  • @igoreksazonov
    @igoreksazonov 3 ปีที่แล้ว +1

    threejs api changing every month and dont have a stable one, so the code worked a year ago not currently working =(((

    •  3 ปีที่แล้ว

      You can download the version you want then put it in your main files, this should help you bro , even if the code you used deprecated, your projects is gonna survive, but of course new versions can mean more security and new methods

  • @joelmik8945
    @joelmik8945 3 ปีที่แล้ว

    anyone else got the same problem where you can't add a map of the texture to the PointsMaterial?

    • @FranciscoJavierRincon
      @FranciscoJavierRincon 3 ปีที่แล้ว

      yes, i resolve it writing all in one line: const cross = new THREE.TextureLoader().load('./sound-waves.png');

  • @activegaming6639
    @activegaming6639 3 ปีที่แล้ว

    i get this when i type cd code
    -
    -
    -
    -
    cd : Cannot find path 'C:\Users\Oscar\code' because it does not exist.
    At line:1 char:1
    + cd code
    + ~~~~~~~
    + CategoryInfo : ObjectNotFound: (C:\Users\Oscar\code:String) [Set-Location], ItemN
    otFoundException
    + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.SetLocationCommand

  • @juncando
    @juncando 3 ปีที่แล้ว

    Fantastic :)

  • @besooab8810
    @besooab8810 2 ปีที่แล้ว

    Can we have the source code ?

  • @thunderstack5365
    @thunderstack5365 3 ปีที่แล้ว

    Wow cool can we use our own images

  • @vxcode9536
    @vxcode9536 2 ปีที่แล้ว

    Make three js 3D slide show cloth image

  • @sakhile_nkomo
    @sakhile_nkomo 2 ปีที่แล้ว

    "Obviously that doesn't do shit" SUBSCRIBED

  • @neildrabinski3330
    @neildrabinski3330 ปีที่แล้ว

    +1 for the Akron shirt #akronthefup

  • @ozioma
    @ozioma 2 ปีที่แล้ว

    too cool

  • @matthewjames-rodriguez8982
    @matthewjames-rodriguez8982 3 ปีที่แล้ว

    mobile responsive?

  • @vampirejs758
    @vampirejs758 3 ปีที่แล้ว

    Hairy Gary

  • @bkalkuz
    @bkalkuz 3 ปีที่แล้ว +4

    excuse me to being so honest but;
    can't you put screens close to each other which you are reading the code from and you are following your code to? your looks between reading screen and coding screen feels me disturb. like you are explaining something but deeply do not know about what or how it is and just reading to tell anothers... not natural.

    • @unrecited
      @unrecited 3 ปีที่แล้ว

      lmao - does it really matter? There are very few folks on TH-cam coding from the top of their head, and if they are, it DEFINITELY doesn't go over as smooth as this does. You calling that out really didn't make him look bad one bit - it just makes you look like the clown shoe of a prick you are. All the main TH-cam creators ALL print their project tutorial code or pull it up on screen and use it for reference during the tutorials, and the ones who dont, have like hour long videos of them thinking which is cool two depending on what type of content your looking for. This video wasn't made based on what 'disturbs' you so dont watch it if that's the case - excuse me for being so honest.

    • @bkalkuz
      @bkalkuz 3 ปีที่แล้ว

      ​@@unrecited is it your professionality or doing this as a hobby to been so useless like this?

  • @flelfwastaken
    @flelfwastaken 3 ปีที่แล้ว +2

    You can make your life easier if you do the posArray like this :
    const posArray = new Float32Array(5000 * 3).fill().map(() => THREE.MathUtils.randFloatSpread(10))

  • @TheRealJuggaloJoel
    @TheRealJuggaloJoel 3 ปีที่แล้ว

    wont change anything. No color, no picture. I even made tiny png with alpha backs. Nothing.
    h1,
    p {
    flex-basis: 0;
    flex-grow: 1;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    breaks the code.
    Anyone know why? I've watched through a few times now.

    • @ranzen2269
      @ranzen2269 3 ปีที่แล้ว +1

      idk If you've already resolved it, but your problem it's in this line: const cross = loader.load('/cross.png'), you forgot a point -> const cross = loader.load('./cross.png'). And h1,p{} looks good to me.