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

Channel: Red Stapler

Views: 300,372

Keywords: three.js, 3d model website, website 3d model viewer, 3d model 360 viewer, 360 degrees viewer, 360 photo, javascript, three.js tutorial, three.js import 3d model, three.js import model, gltf, three.js gltf, three.js car model, three.js load model, javascript tutorial, html, 360 degrees product viewer, 3d model three.js

Id: 1TeMXIWRrqE

Length: 5min 56sec (356 seconds)

Published: Tue May 28 2019