Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial


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

45 Comments

Add a Comment

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