in previous video we made a tutorial about Thanos snap effect and received
quite a positive respond so in this video we are going to stay with Thanos a
little bit more and see how we made his portal with javascript from scratch
let's check it out in this tutorial we are going to use three.js library to
help rendering the scene first let's download the latest version and include
it to your page here is our example page we don't need CSS at all to make this
happen except the margin zero and overflow:hidden to hide the scrollbar
let's set up our rendering scene with three.js the first thing you need is to
create a scene is like a container for your 3d world next let's set up the
light without the light you won't be able to see anything on a scene let's create an
ambient light using directional light object I'm going to set a light color to
white with 50% intensity then I'm going to set the light direction from front to
back and add it to the scene now we have the light next we need a camera to shoot
your scene let's use perspective camera which is the most common camera type for
rendering a 3d scene I'm going to use 80 degrees field of view and current
viewport as aspect ratio. The last two numbers define viewing frustum of the
camera then I'm going to place the camera 1000 units to the front and add
it to the scene next we will set up a rendering engine we're going to use
WebGL for this tutorial
I was set in environment color to black and rendering size to our viewport and add it to the page
now the scene is ready but if you render it now you won't see
anything this because we haven't add any object to the scene yet let's do it
I'm going to create a separate function call protocol setup then you create a
texture loader the object to load a smoke texture. You can use any transparent
smoke image in PNG format here is the one I have for this tutorial we can load the
texture using load method and when the load is completed it will trigger
callback function. To create 3d object we need two things. First is geometry to
define the shape and second is material to define a surface appearance like
transparency reflectiveness and texture let's create a plane geometry and
material to put our texture on
let's create a 3d object from our geometry and material then set the
position and add it to the scene if we try rendering it now you will see our
smoke particle now if you look at Thanos portal you will see that it's a
conical spiral shape so we are going to create a loop to create lot of smoke
particles and place it along the spiral line here is the conical spiral equation
that I Googled and use it to set each particle position I will also add a
random rotation to create a diversity
starting to look good now let's try animate it. To create an animation we
need a clock object to keep track of the time then I'm going to create an animate
function. This function will be called recursively to animate our scene and
each execution will represent one frame First we will get the time pass between
the frame from our clock object using get Delta. We use it to control the
movement of the objects in the scene during the animation then I'm going to
create an array and add all the particles into it
and in the animate function we will go through that array and add a rotation to
it using Delta then I'm going to render the scene and call requestAnimationFrame
to start a recursive almost there Now let's add some blue light to the
portal. This time we'll use a point light instead of directional and place it at
the center of the vortex
then add some random flickering using math.random
finally I'm going to add some background smoke using the same code but we don't
use the Spiral equation this time
I also set opacity to 40% as well. And that's the final result if you love this
tutorial don't forget to like or subscribe to stay tuned with us for more
thanks for watching and see you next time bye