Realistic Rain Effect Three.js Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ม.ค. 2025

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

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

    We're having issue with TH-cam video compression algorithm. You might see a pixelated/blurry at the raining scene. Anyway, you can see the live demo on our website (along with the source code) at redstapler.co/three-js-realistic-rain-tutorial/

  • @mukulchoudhury6859
    @mukulchoudhury6859 4 ปีที่แล้ว

    You are the most brilliant tutor I've ever come across. hands down. Really appreciate you making these tutorials :)

  • @supermonkeywtf09
    @supermonkeywtf09 4 ปีที่แล้ว

    The video format and presentation (voice over, code to scene transitions) is of rally high quality, nice work.
    It would be great to see an implementation that works (looks plausible) with a moving camera, as that is something very hard to get right and the resources seem scarce.
    Keep up the awesome work!

  • @everestgjonaj
    @everestgjonaj 5 ปีที่แล้ว +2

    Awesome job! Looking for more in the future.

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

    Amazing visualization brother. Love your content

  • @maisahbonnnnn
    @maisahbonnnnn 4 ปีที่แล้ว

    Great great video ! Clear explanations, fast and working as intended. Thank you !

  • @briseidamontiel4777
    @briseidamontiel4777 5 ปีที่แล้ว +2

    You are amazing! I'm always looking forward to your videos-could you please keep doing more Three.js videos, pleaseeee! Thankssss

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

    Good content, this is the first time I have used Three.js and I can't get the cloud image to load. I have tried simply placing the image in the root of the directory and also bringing it in as a remote image and neither has worked. Since there is no tag or css-loader it appears that loading is the sole responsibility of Three.js, is there something obvious I am missing? Thank you.

  • @asdfghjkl1770
    @asdfghjkl1770 5 ปีที่แล้ว

    A highly UNDERRATED video!

  • @Alessandro-nq3tm
    @Alessandro-nq3tm 5 ปีที่แล้ว +2

    Amazing work!!!

  • @code4chaosmobile
    @code4chaosmobile 5 ปีที่แล้ว

    Fantastic video. Time to binge

  • @kamildoan
    @kamildoan 5 ปีที่แล้ว

    you are awsome man I really love your style

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

    Amazing, truly amazing!

  • @ishan101
    @ishan101 5 ปีที่แล้ว

    Awesome stuff, would love to learn more on threejs.

  • @_wise_one
    @_wise_one 5 ปีที่แล้ว

    Thanks mate i love your all videos

  • @rebelmachine88
    @rebelmachine88 5 ปีที่แล้ว

    WOW, this is extremely cool. I really like, thanks for the video.

  • @alexandros-markovits
    @alexandros-markovits 5 ปีที่แล้ว

    Great tutorials man!

  • @anirbansarkar3226
    @anirbansarkar3226 5 ปีที่แล้ว

    You are working Hard still didn't get viewer . your contant is really awesome I love your creativity. Keet it up. I liked your video. Love y. Bro

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

    Hey, how can I see the output on the browser? Are you simply using live server?

  • @TKNDevCorner
    @TKNDevCorner 5 ปีที่แล้ว

    Thanks a lot for the tutorial ! Could you try with the fire effect too ?

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

    Cool 😳

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

    I'm having a bit of trouble with this. I even copied the source code and it still won't run. It's just throwing errors at me - "Cannot convert undefined or null to object".
    I switched to the non-minified version and still the same issue. Not sure what to do.
    Any thoughts?

    • @francescoarcarese5426
      @francescoarcarese5426 5 ปีที่แล้ว

      after this line: rainGeo.vertices.push(rainDrop);
      add this line: rainGeo.morphAttributes = {};
      this is because there is an issue open in THREE.js about the initialization of morphAttributes property

  • @tedzak06
    @tedzak06 4 ปีที่แล้ว

    hello, it is possible to make an example on react, because i do not arrive to integrate your example inside

  • @franklo
    @franklo 5 ปีที่แล้ว

    Amazing

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

    rainGeo = new THREE.Geometry(); part doesnt work now April 2022. Anyone has solution?

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

      After googling I noticed there is an issue three.js removed support for Geometry(). How can i fix it?

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

      I'm having the same issue for me it says it is not a constructor?

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

      Geometry is not used anymore after r125 its deprecated and buffergeometry is used instead

  • @Warrypro
    @Warrypro 5 ปีที่แล้ว

    Amazing!

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

    I used R104 only, but still not working. Should we take the three.js separetly or just download it and incorporate it? [Because of the path issue...]

  • @technoinfoworldwide2329
    @technoinfoworldwide2329 5 ปีที่แล้ว

    how did u add raining sound as there is no mention of mp3 in code

  • @user-eq7fu9sd5z
    @user-eq7fu9sd5z 5 ปีที่แล้ว

    very cool

  • @Sally-gh7sc
    @Sally-gh7sc 5 ปีที่แล้ว

    amazing 😍

  • @Mark-de3ib
    @Mark-de3ib 2 ปีที่แล้ว

    my rain drops are squares any help with that?

  • @haroldguzmana3246
    @haroldguzmana3246 5 ปีที่แล้ว

    Wow awesome, tnx yu

  • @raghavmaloni8666
    @raghavmaloni8666 4 ปีที่แล้ว +2

    But its is not Working.

  • @abazur7742
    @abazur7742 5 ปีที่แล้ว

    3:50 i thought three js was using radians instead of degrees ....

    • @RedStapler_channel
      @RedStapler_channel  5 ปีที่แล้ว

      You're correct! It's radian. I must have brain fried. Anyway, the result should be the similar for this case. (and that's why I didn't notice it XD )

    • @abazur7742
      @abazur7742 5 ปีที่แล้ว

      @@RedStapler_channel yeah the result is the same, but i got a bit confused xD

  • @imrannawabkhan
    @imrannawabkhan 5 ปีที่แล้ว

    Wow gr8

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

    5:50 rain ptls

  • @ElijahIsMe
    @ElijahIsMe 4 ปีที่แล้ว

    for some reason for me,
    portalParticles.forEach(p => {p.rotation.z -= delta *1.5;} ); doesnt work,
    but
    portalParticles.forEach(function(p) {p.rotation.z -= delta *1.5;} ); does
    why is this?

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

    This is just fantastic, thank you so much TK !!
    I have a little problem trying to reproduce this, my animation is not like the final one you illustrate in the "first picture". Where rain drops are of random sizes. Mine is like the one you put in progress (the third one in this article).
    I absolutely copied the same code, my only modification is adding a "resize" function which is called as long as "animate" is called. In other words I put "resize" the first line in "animate".
    where "resize" is simple like:
    ```
    function resize() {
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    if (width != canvas.width || height != canvas.height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    }
    }
    ```
    If I omit "resize" call, so it is like your code 100%, drops are now of random sizes but not of high quality!!
    Thanks a lot §

  • @cjoelharrison
    @cjoelharrison 5 ปีที่แล้ว

    Just wow

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

    Can u explain what is three.js ?

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

      basically it's a javascript library for creating 3D on website

    • @technoinfoworldwide2329
      @technoinfoworldwide2329 5 ปีที่แล้ว

      @@RedStapler_channel can u make video on simulation?

  • @ozoshmaharjan2016
    @ozoshmaharjan2016 5 ปีที่แล้ว +7

    Can you teach 360° rotation in next video please. Thank you.
    Sample: honda.com.np
    Checkout a bike in here. You can rotate it 360 deg and view by all angles

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

      dude they're just filtering through a bunch of different images on drag.

  • @Dazedstatue
    @Dazedstatue 5 ปีที่แล้ว

    when i use the smoke png i get the cors error for it not being local, how do i fix that?

    • @1D4youandme
      @1D4youandme 5 ปีที่แล้ว

      TheClimaxxProduction to access local files, you have to run index.html on a local server. you should look into http-server. The threeJS documentation site has an entire section explaining this!

  • @ajithd19
    @ajithd19 5 ปีที่แล้ว

    One Question how to create html element in raycasting on threejs 3d object on click

  • @mhdyousuf3392
    @mhdyousuf3392 5 ปีที่แล้ว

    Can you give Three.js Crash course or 30+min Tutorial .. i dont know where to start and when i saw the docs , i am completely blank!

    • @hefni5237
      @hefni5237 5 ปีที่แล้ว

      You can find crash course in traversy media channel

    • @RedStapler_channel
      @RedStapler_channel  5 ปีที่แล้ว

      check our beginner three.js tutorial video here th-cam.com/video/uzkedMF-l4Q/w-d-xo.html (These videos were made before I upgraded my mic so sorry for bad voice quality :p)

  • @mainak666
    @mainak666 5 ปีที่แล้ว

    Subscribed!!

  • @tuanlam999
    @tuanlam999 4 ปีที่แล้ว

    Wow

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

    Remember to download the R104 version in the git repo tags, otherwise it will not work.

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

    Can someone share the executing zipped file ?

  • @Bastric91
    @Bastric91 5 ปีที่แล้ว

    I have a problem in React , error: Cannot read property 'push' of undefined xD ...this.rainGeo.vertices.push(thisrainDrop)... I do not know why :/ It is not a Array or I do not know xD

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

      Faced same issue here. How you fix Geometry() constructor since it's not exist in current library?

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

      @@aribzzt i used THREE.BufferGeomentry in place of THREE.Geomentry

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

      How did you fix the problem here?

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

      same problem here did you fix it?

  • @abraheom
    @abraheom 5 ปีที่แล้ว

    Cool :)

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

    i copied every code - nothing work

  • @kostasancez2358
    @kostasancez2358 5 ปีที่แล้ว +2

    Кажется я знаю, чем займусь завтра

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

    GET OUTTA HERE!

  • @oswaldorodriguez1128
    @oswaldorodriguez1128 4 ปีที่แล้ว

    :o