Adding a 3D model to a website using THREE.JS

if you're anything like me you also like to interact with 3D elements every time you see them on a site so today I want to show you how to add those elements to your own website using a little Library called 3js so the first thing you'd have to do here is download the 3D model that you want to use I recommend using this website called sketchfab.com because they have a lot of pre-models there that you can just use as long as you give credits to The Creator just go ahead and create an account if you don't have one yet be sure to always check the licensing information to make sure that you can use this module for the purpose you want to then finally just go ahead and download it in gltf format so now let's quickly jump into our code let's start by checking the index.html file so here there's only two things that you really need a div with an ID so you can refer to it on your JavaScript and you need to of course import your Javascript file I'm also importing a CSS file here but that's just to style things a little bit to make it nicer but you don't really need that for 3js to work now jumping over to our CSS file here is very simple I'm just setting the background to Black sending a little nicer font I'm setting a header on the top of the page and I'm also making the canvas element take over the whole screen so now that we cover the basics let's go over to our JavaScript file and get started the first thing you need to do here is import 3js so I'm importing it in three different files first one is the main 3js library second one is Orbit Control so we can rotate we can increase the size we can change our 3D element in many ways the third and last one is the gltf loader and we're going to be using it to import the gltf file into 3js next we're going to be creating our scene object let me just quickly close the mini map here and before we go any further I want to explain a little bit of how 3js works so to render any kind of 3D element there's three things that you're always going to need a scene object a camera and a renderer the scene object is like the 3D space so you add your 3D elements to the scene the camera is the point of view from where the scene is going to be rendered the renderer is just what puts everything together and creates the element that's going to be added to the page so moving on we're going to initialize a object variable and a controls variable I'm also initializing a object render variable and that one is specific to my project so you don't have to worry about it next I'm starting a new gltf loader and then I'm loading my gltf file into the project the load function takes callbacks for Success loading progress and error specifically in that order now we create a render and I'm setting the alpha to true so we can see the background instead of having a blank background or whatever background is set on the gltf file and I'm setting the size of the render to be the same size as the screen I'll then append the Dom element property of my renderer to my container 3D div I'm Now setting the Z position of my camera and I'm using a ternary operator here to change the Z position according to the object that I'm rendering but if you're only rendering one object you don't have to worry about that for the positioning and the lightning you're gonna have to play a little bit with the numbers to see what works best for your 3D model I'm now going to add the lights that Illuminator 3D model and if you don't add those lights sometimes it works sometimes it doesn't when it doesn't you're only going to get a black screen so if you're getting a black screen just know that you probably need more lights after creating each light just add them to the scene now we have to create an animate function that's going to be called on every frame and inside that function is where you're going to render your 3D model now let's add an event listener for resize so if the user resizes the screen we also resize the camera and the renderer lastly just call your animate function I clearly forgot to add my renderer.render function inside the animate function so I'll do that now also don't worry about this extra code I'm also adding here that's to make the eye model move according to the mouse's position but more on that later with the code we currently have the models are already being loaded and displayed on the page but they are not interactive at all users can't move the 3D objects and they don't react to any browser event so how do we add that bit of functionality both example models that we are working on today will have different types of interactions the dinosaur one will be draggable rotatable and zoomable by the user while the eye will only follow the user's Mouse position so let's start by creating variables to hold the mouse's current position and we'll initiate those variables at the exact center of the screen next we will add orbit controls to the camera only if the object being rendered is the dinosaur orbit controls are a very useful part of 3js since it allows us to add camera controls in a single line of code now do you remember the code that I told you not to worry about before let's take a look at that this piece of code runs only for the eye model and it rotates the model based on the value on our Mouse position variables lastly we just need to add an event listener to the document so anytime the mouse moves we can update our Mouse position variables and that's it now we have our fully interactive 3D models on the site I hope you enjoyed watching and if this video helped you in any way please consider liking and subscribing to the channel to allow me to keep making videos that's it for today and see you next time

Channel: Gabriel Molter

Views: 77,447

Keywords:

Id: lGokKxJ8D2c

Length: 5min 54sec (354 seconds)

Published: Mon Mar 20 2023