so you are looking for an idea to create stunning background for your website
this tutorial is for you we will show you how to create an animated nebula
background using javascript and three.js let's check it out let's start with a
basic scene setup first import three.js library then setup the scene and camera
I'm going to use a perspective camera at 60 degrees viewing angle and set the
size to the current viewport with 1000 viewing frustum then place the camera
and set up the rotation next set up the ambient light with soft white light then
set up the WebGL renderer
I'm going to add a green fog to the scene to create the aurora effect then
add the scene to the page as canvas element and finally set up the rendering
loop just call requestanimationframe after calling render method from the renderer
now the scene is set up to create nebula first we'll need to create a cloud
particle I will reuse the cloud texture from previous tutorial. To load the
texture into three.js you will need to use texture loader and then continue the
process after the callback function and to create a cloud first we will create a
plain geometry then create a material and map the cloud texture to it
also set the transparent property to true since we need lots of cloud
particles let's create a loop for 50 times create a cloud object with the
geometry and material above then for each cloud we will random the position
and rotation
also reduce the opacity to 55% and finally added to the scene now we have
the clouds next let's animate them first we will create an array object then keep
the reference to each cloud after we created
and inside a rendering loop we will update rotation of each cloud next we
will start working on the lights first we will add a pale orange directional light
then we will start adding different colors of point lights I'm going to
place orange red and blue lights around clouds
the nebula structure is complete and next we will work on a post processing
in previous tutorial I have shown you how to create bloom or HDR post
processing effect we are going to reuse that code in this tutorial first let's
import the post processing plug-in for three tests then create global variable
for effect composer then copy over the code from previous tutorial finally
render from the post processing composer instead of normal renderer
almost there now the background looks a bit empty so let's add some stars here
is the stock image that I'm going to use as a background texture let's load the
image using texture loader again then create a texture post-processing effect
from the texture we have just load it using color Dodge blend function
and set the opacity to 20% then add the effect to the effect pass now here's the
login form from our previous tutorial again after copy over the code and made
some small CSS background color change here is the final result before we end
this tutorial to make this example responsive we will need to update the
aspect ratio when the user resizes the browser window so let's create a handler
function to reset the camera and render a setting
then bind it with resize event
and that's all for this tutorial hope you guys enjoy if you want to see more
development tips and tutorials subscribe this channel to stay tuned thanks for
watching and see you next time bye