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