3D Space Warp JavaScript Effect – Three.js Tutorial


in previous tutorial we show you how to
create a nebula particles effect using Three.js
this tutorial is still space-related today we are going to show you how to
create a space warp background effect using javascript and three.js
in just a few minutes let’s check it out here is the basic CSS for this page just
reset the margin to 0 and overflow:hidden to remove the scrollbar
now let’s import three.js library to our page then start with the basic setup
we will need to create scene camera and renderer first create a new scene object then set up a perspective camera with 60
degrees viewing angle and one thousand viewing frustum I will
place the camera and rotate it 90 degrees upward into the sky we’ll come back and
create the falling stars particle later and next we’ll set up the WebGLrenderer we will set the size to match the
current viewport then append it to the page as canvas element finally create a
rendering loop by creating a function to render our scene then use
requestanimationframe to recursively call itself the basic setup is complete
it’s still an empty page but if you open the console you will see three J’s
message that indicates everything is running fine and good to go next we will
create star particles since we are going to need thousands of them, creating a
sphere shape for each particle is very expensive and make our website slow
instead we will create a single 3D object with lots of vertices then for
each of the vertex on that object we will map it with a circle texture in
three.js we call this a points object which is very useful for dealing with
particles now let’s start with creating the geometry then we’ll create a loop to add each
vertex or star for this tutorial 6000 should be enough
then we’ll random the position and add it to the vertices array and next start mapping texture you can
use any white circle with transparent background like this one then use
texture loader to load the image and create a points material set the color to white adjust the size
and map it with a loaded image now geometry and material already will
create a point subject and add it to the scene looks good now let’s animate it first we
will set the initial velocity for each star to zero with small acceleration then on each animation frame we will
look through each vertex and update the velocity then move the stars along the y-axis
with velocity amount then if the Stars falls behind a screen we will reset its
position and velocity to start over again then we will tell to adjust to
update our new vertices position by setting verticesNeedUpdate to true finally I will add a small rotation to
all stars to create a little cinematic effect and the effect is ready after adding
some additional code and CSS now we can have a simple website with our scene as
background so that’s all for this video hope you guys enjoy if you liked this
don’t forget to subscribe to stay tuned for more dev tips and tutorials thanks
watching see you next time bye

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *