Realistic Rain Effect Three.js Tutorial
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- How to create a realistic cinematic rain effect with JavaScript and Three.js from scratch.
Source Code: redstapler.co/three-js-realis...
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#ThreeJS #JavaScriptEffect #WebDesign - วิทยาศาสตร์และเทคโนโลยี
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/
You are the most brilliant tutor I've ever come across. hands down. Really appreciate you making these tutorials :)
Great great video ! Clear explanations, fast and working as intended. Thank you !
Awesome job! Looking for more in the future.
Amazing visualization brother. Love your content
Amazing work!!!
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!
Amazing, truly amazing!
Fantastic video. Time to binge
Great tutorials man!
WOW, this is extremely cool. I really like, thanks for the video.
You are amazing! I'm always looking forward to your videos-could you please keep doing more Three.js videos, pleaseeee! Thankssss
Thanks mate i love your all videos
Awesome stuff, would love to learn more on threejs.
A highly UNDERRATED video!
you are awsome man I really love your style
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
Amazing!
amazing 😍
Amazing
Wow awesome, tnx yu
Cool 😳
Thanks a lot for the tutorial ! Could you try with the fire effect too ?
very cool
Subscribed!!
Wow gr8
Cool :)
Just wow
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.
Wow
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 §
how did u add raining sound as there is no mention of mp3 in code
hello, it is possible to make an example on react, because i do not arrive to integrate your example inside
One Question how to create html element in raycasting on threejs 3d object on click
Hey, how can I see the output on the browser? Are you simply using live server?
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...]
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?
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
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?
my rain drops are squares any help with that?
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
dude they're just filtering through a bunch of different images on drag.
Remember to download the R104 version in the git repo tags, otherwise it will not work.
when i use the smoke png i get the cors error for it not being local, how do i fix that?
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!
But its is not Working.
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!
You can find crash course in traversy media channel
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)
Кажется я знаю, чем займусь завтра
Can u explain what is three.js ?
basically it's a javascript library for creating 3D on website
@@RedStapler_channel can u make video on simulation?
Can someone share the executing zipped file ?
:o
5:50 rain ptls
rainGeo = new THREE.Geometry(); part doesnt work now April 2022. Anyone has solution?
After googling I noticed there is an issue three.js removed support for Geometry(). How can i fix it?
I'm having the same issue for me it says it is not a constructor?
Geometry is not used anymore after r125 its deprecated and buffergeometry is used instead
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
Faced same issue here. How you fix Geometry() constructor since it's not exist in current library?
@@aribzzt i used THREE.BufferGeomentry in place of THREE.Geomentry
How did you fix the problem here?
same problem here did you fix it?
3:50 i thought three js was using radians instead of degrees ....
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 )
@@RedStapler_channel yeah the result is the same, but i got a bit confused xD
GET OUTTA HERE!
i copied every code - nothing work
honestly that didn't look realistic at all lol