hello and welcome to Red Stapler channel this is the second video of previous
tutorial previously I have shown you briefly on how to create an animated 3D cube object
object and added to the scene now in this video I'm going to do
it step by step and explain a little bit more in details on how and why we are
doing it let's go check it out the first thing we need to do is to create a scene
scene is like a universe where we can add objects camera and light etc next we
need to set up the camera for most of the time we are going to stick with
perspective which is a normal camera type where you see closer object bigger
and smaller when they are away so the first parameter of the camera is the
field of view basically it's the width of a perception angle let's set it to 75
next is the aspect ratio we are going to use the current bit divided by height
and next we are going to set up a renderer you can think of it as a
rendering engine let's use WebGL renderer for now you can customize the
rendering option here such as anti-aliasing
and then we'll use setsize method to designate rendering resolution let's use
the current width and hide a dependent element generated from the renderer to
the HTML body and now we have the scene and camera setup next we are going to
create a cube first we are going to create geometry think of it as a
skeleton of our object there are many types of geometry available but since we
are going to create a queue we are going to use box geometry with equal size on
all dimensions now we are going to need a skin to cover our geometry so we need
material which define the characteristic of the skin such as opacity reflection
or a texture let's use mesh basic material with red color for now and we
are going to create our cube by creating a mesh object using our geometry and
material and then add cube to the scene
and finally call render method on a renderer object and past the scene in
camera to it at this point you see only the black scene because the camera and
the cube is currently on the same spot we need to reposition the cube so we can
see it I'm going to also alter the rotation a little bit so that's our cube
now to animate it we need to create an animation loop from recursive function
call first create a function to define the action for each frame inside we will
increment the rotation a little bit and call the render method and next we will
call requestanimationframe this method will be invoked by the browser's at the
current display refresh rate usually 60 times per second and pass our current
animate function to it and finally start the animation loop by calling our
function
so that's the basic of how to use three.js to create a simple 3d animation on
your website in the next video we will dig more into each geometry types hope
you guys enjoy this video and please subscribe if you love this video or give
us thumbs up thanks watching bye