in previous video we made a tutorial on how to make Thanos portal effect using
three.js this time we will show you how to use the same technique to turn it
into the realistic raining scene in just a few minutes so let's check it out
first let's begin with downloading the latest version of three.js and included to
the page next create a previous scene
then create a camera I'll use a perspective camera with 60 degrees field
of view using current viewport aspect ratio and 1000 unit viewing frustum I'll
also set the rotation angle of the camera to look up into the sky next I'll
add two types of light here the first one is ambient light this will
illuminate all objects in the scene from all directions
the second is directional light this will represent the moonlight in the sky
Nexo set up the WebGL renderer using current viewport size
then add it to the page as canvas element now the basic setup is completed
but there is nothing to see at this time we will start with adding some clouds
in three.js e need two things to create 3d objects first is geometry which
defines the shape of the object and another is material which defines the
surface and texture for the cloud I will use this smoke image as texture let's
set up the texture loader in the callback function which will trigger
when the texture is loaded we will create a geometry for each cloud as 500
units plane square
then create a material and map it with a smoke texture also set the transparent
to true now I'm going to create a loop to randomly add each cloud to the scene
first create a cloud object from the geometry and material above then
randomly set the position
I will set the cloud rotation angle to face the camera also add a little bit of
random around the z-axis then set the 60% opacity and add it to the scene
next let's try animating the scene first I will keep the reference to each cloud
in the array then in the animate function I will use the array to rotate
them one by one then render the scene and start the animation loop using
requestanimationframe
next I'll add some lightning flash let's set up a point light with blue color
I will position it behind a cloud and added it a scene then in the animate
function I will add a logic to random a flash position and light intensity you
can change these numbers in the if condition to adjust frequency and
lightning intensity
the cloud is ready next I'll add the rain this will be a little bit different from
adding cloud we are not going to create a separated object for each raindrop
that would be very inefficient and you might get a framerate drop instead we
will create this one object which has lots of vertices and each vertex
represents one raindrop so I will create a loop to create each vertex using
vector three object we will random the position using math.random
and then use vertices.push to add vertex to the geometry then I will create a
rain material using point material class set the size and color to white
and transparent to true finally we will create a rain object and add it to the scene
now we will animate the rain by adding velocity property to each raindrop then
in the animate function we'll move each drop and increase the
velocity to simulate the gravity also reset the position if they are outside
the screen
finally I will add some fog as a finishing touch
also add a small rotation to the rain object you create a cinematic effect and
that's it if you loved this tutorial please help share this video to support
our channel and keep us going like a subscribe to stay tuned for more thanks
for watching and see you next time bye