hello and welcome to red stapler channel in this tutorial we are going to show
you how to put a 3d model on your website with 360 degrees viewer in just a
few minutes ready let's check it out in this tutorial we are going to use three.js
one of the most popular 3d JavaScript library first of all we need
to find a suitable 3d model there are lots of free models available on the
Internetใ three.js recommended to use model with
gltf format due to small file size and efficiency so I'm going to download the
one that already in gltf format but if you already have a model in other
formats three.js is also support FBX and obj file as
well now once we downloaded the model I will put all files and folders in a web
directory next let's work on a JavaScript first include the latest
version of three.js to your page next create a scene, set the background color
and camera. You can find more details about three.js Basics in our previous
tutorial at the link below
then I'll add a soft white ambient light to illuminate our model and finally we
will set up a WebGL renderer using current viewport aspect ratio and add
the output canvas to our page
the basic setup is completed next we'll start loading our model
we use gltf loader class then use load method to load our model file then add
our model to the scene and render it when the load is completed in a callback function
what we currently see is the inside of the car we all need to move the camera
outside as well as scale down the car size I'm going to place the camera in
front of the car and rotate them by 45 degrees
then to scale down the car we will get our car model inside the callback
function and use scale.set I'm going to reduce the car size by half now you
will see that the car is miscolored this because our only light source, the
ambient light, is a light that illuminates all objects in the scene
equally from all directions so it doesn't cast any shadow or reflection we
can fix this by adding other types of light let's start with adding
directional light from above I'm going to set the cast shadow property to true
and add it to the scene then I'm going to also add 4 point lights and place
them around a car point light is similar to the light bulb in real world and
automatically cast shadow
almost finish next we are going to add a 360 degrees viewer that let users rotate
the camera we will use three.js orbitControl plug-in first get the
orbitControls.js from github and include it to your page then create a control
object from our camera and add change event listener to track the mouse
control now instead of one time rendering we will need to create an
animation loop to update the scene when users rotate the camera basically it's
the same as our previous tutorial just create a function to render the scene
and call the request animation frame to start a recursive loop
and that's it! you can find a code of this tutorial in the description box
below of you guys enjoyed this tutorial and don't forget to Like and subscribe
to stay tuned for more thanks for watching and see you next time bye