Add an Interactive 3D Model to Your Website // Three.js Tutorial for Beginners

have you ever wanted to add interactive 3D models like this to your website if so you're in luck in this video I'm going to take you step by step through how to add models like this Millennium Falcon here to your website let's get started so before we can begin we need to learn a bit more about 3D file formats in which formats 3GS supports 3GS supports many different file formats out of the box however they have a recommended workflow that we're going to be using in this video they recommend using the gltf or GL transmission format for 3D models and the reasoning for this is that gltf is focused on runtime asset delivery it's compact to transmit and it's fast to load in the browser it also includes create features like support for materials textures animations and more so now that we know which file format to look for we need to go out and find ourselves a really awesome 3D model so I found this amazing Millennium Falcon model on sketchfab.com and this is done by STEM so thank you stem for building out this super detailed Millennium Falcon model so I want to get this model on my website so after you kind of look around and find a model that you like on sketchfab there's an option here to download 3D model so click on that and then you can see all of the different file formats that this is available in and we can see that luckily this model is available in the gltf format so I'm going to go ahead and download that and then we'll start doing some coding so I went ahead and created a very simple website and I'm going to be adding a 3D model to this site so I can have my Millennium Falcon sitting right here and the user can spin it around and interact with it so just to look at the file structure very quickly I have my index.html file which contains all my HTML code obviously I have a Javascript file which is going to contain all of our 3GS code and I have a public folder which I've added are Millennium Falcon model 2. so that contains the gltf file which we'll be importing as well as all the supplementary files that contain the texture data in order for 3gs to work properly we need to serve it from an actual server now in order to do this you can either set up a node.js server or I'm using a bit easier alternative for testing here I'm using the visual studio code extension called live server I highly recommend downloading this it's when my file structure here I can right click on my index.html file and click on open with live server so that is the window that I have open on the right here this is the website being served with live server let's very quickly look at what's in our index.html file first of all we have the title for our page I am importing some CSS here and this is very important we are adding our 3js dependencies here so this is straight from the documentation but we need to make sure that we are importing the 3js library as well as all of the add-ons the body of our HTML document is very simple I have a little header here with the Millennium Falcon as a title and a little fading border and right here we are importing our main.js file which is going to contain all the JavaScript code we need to load our model the first thing that we need to do is to import the 3Gs module and we can do it with this line here the next thing that we need to do is to set up our renderer here we're creating a new webgl renderer and we're setting anti-aliasing to true just to give the edges a bit of a smooth effect and we need to make sure to set the output color space of our renderer to srgb color space now this may be different depending on the color space of the models that you're working with but srgb is typically the default then we set the size on our renderer to the inner width and inner height of the window and then we make sure to clear the renderer to a black color so this is kind of the default color when there's no models on the screen and this line here sets the pixel ratio to make sure that our scene is rendering appropriately on different devices finally we need to add the renderer to the HTML document and we do that by calling document.body.appenchild and then we're adding the Dom element associated with the renderer now if we save this we still don't see anything on the screen and that's because we need to set up our 3GS scene so let's go ahead and create that now we'll start by defining a new variable called scene and that will be a new three dot scene object the next thing we need to do is to set up a camera so I'm using a perspective camera here with a 45 degree field of view we also need to set the aspect ratio of the camera so we take the width of our window divided by the height and then we're also setting the near and the far plane for that camera I'm also going to set the position of the camera so I've predetermined this to be a good position for the camera we want it far enough away from the model so that we can actually see it if you don't set this to anything the camera defaults to the origin of the scene and you might actually be inside of your model when you try and view it and you won't see anything at all before we import our model into the scene we need to add some basic geometry so we can make sure that the scene is actually rendering and working appropriately I'm going to add a plane to our scene and this is what the Millennium Falcon will sit on top of so we're setting the width and the length of that plane to 20 units and we're setting the width and the height segments to 32 each now I also need to rotate our plane by 90 degrees so let's make sure that the plane is sitting flat on the ground otherwise it's oriented vertically and also creating a new material that we're going to apply to our geometry so we're setting a basic gray color for this material and we're also setting this side property here to make sure that 3GS renders both sides of the plane by default it only renders one side of the plane and that can cause issues with shadows later on finally we're creating a mesh from our geometry and our material and we're adding that mesh to the scene lastly we need to make sure to render our scene so we start by creating an animate function and within that we call request animation frame and we pass in a reference to our animate function and then we ask the renderer to render our scene with the camera that we created so to kick off the rendering process we need to actually call this animate method and this will kick off the render Loop and all animation frames after that will happen automatically now you may be wondering why we're still not seeing anything in our scene we have our scene we have our camera we've added a plain mesh to our scene we're animating it so why isn't anything showing up here so the reason is we don't have any lights in our scene yet so we need to go ahead and add a light I'm going to add a spotlight that's going to shine down on top of the Millennium Falcon so after our code where we create our ground plane I have created a new Spotlight here so I'm making this a white light I'm setting the intensity the distance that the spotlight shines and then these two values control how the spotlight kind of attenuates near its edges finally we need to set the spotlight to a position where it can shine on our scene so I just give it a y position of 25 so that'll be directly overhead our model and then be sure to add that Spotlight to the scene now that we've saved our changes we can see that there is a lit portion of our scene here but our camera is not looking at it on Center we can fix this by calling the look at method for our camera so we're telling the camera to look at the origin of our scene so if we save these changes we can now see that our Spotlight is lighting up our ground and our camera is looking at the center of where that Spotlight is shining we now have a basic scene set up and we're ready to add our 3D model to the scene when doing anything in 3js it's really important to look at the documentation I went ahead and looked up the documentation for the gltf loader so it tells us that we need to import the gltf loader from the 3js add-ons module additionally if we scroll down we can see an example of how we can load a gltf file in our scene let's start by importing the gltf loader into our main.js file next we need to create a gltf loader I've created a new variable called loader and that is an instance of the gltf loader and I'm also setting the default path for that to my public Millennium Falcon folder so if you remember my folder structure here I have my public folder and then my Millennium Falcon model which I unzipped from my download from sketchfab I've added that folder in here and that contains all of my gltf data to load our model into the scene we called the load method on our loader variable so this requires two different arguments the first is the name of the gltf file located within this directory and the second argument is a callback function so this function is called when our model is finished loading and it has one argument which is the gltf data that was loaded from the file so we can extract the mesh from that data by calling gltf.scene and assigning that to a mesh variable we're also setting the position of that mesh to get it appropriately positioned within the scene and finally we go ahead and add that mesh to the scene so if you go ahead and Save and after a little bit of time we can see that our model is now loaded into the scene just like that we have our model loaded and textured well this is all fun and good we can't really interact with our 3D model fortunately 3js has a different module that we can use called orbit controls orbit controls as the name suggests allows our camera to orbit around a specific Target and it automatically sets up all of the mouse events so we can pan zoom and rotate around our object the 3Gs documentation is very complete and has all the code that we need to set up these orbit controls we'll need to start by importing the orbit controls module and then setting up the orbit controls within our file so let's go ahead and do that now so I've imported the orbit controls at the top of our file from the 3js add-ons module let's go ahead and create our controls now under our camera so this may look complicated but it's very simple to set up I've created a new variable called controls and I've created a new instance of orbit controls that requires two arguments a reference to our camera object that we've created and the Dom element associated with our renderer finally I've set some parameters on our controls that I've fine-tuned how I like it I've enabled damping which allows for smooth rotation I have disabled panning around so the object will always stay centered within View I've set the minimum maximum Zoom distance the minimum and maximum polar angle which is basically how high or how low the user can tilt the camera and I've disabled auto rotation finally I've set the Target that our camera is looking at to slightly above the Millennium Falcon just to give it a bit better View so we can go ahead and delete this line right here finally we need to call update on our controls this will apply all of the changes that we have made to the orbit controls object the last thing that we need to do is to make sure to call the update method on our controls within the animate function if I save this I can now use my mouse to rotate my model around and I can use the mouse wheel to zoom in and out and look at all the fine detail on my model so now that we have our model loaded into our scene and we have some great camera controls set up there's still one thing missing and that's Shadows without Shadows our model looks really flat it doesn't look very atmospheric at all to enable Shadows we first need to make some changes to our renderer on a renderer there is a property called Shadow map then we need to set the enabled property of the Shadow map to True finally I set the type of my shadow map to PCF soft Shadow map this creates a really high quality realistic Shadow albeit at some cost of performance next we need to set up our light to actually cast shadows and we can do this simply by setting the cast Shadow property of our Spotlight to true finally we need to update our Millennium Falcon model so that all of the meshes associated with it can cast shadows as well as receive Shadows we set receive Shadow to True since we want the different parts of lamonium Falcon to cast Shadows on itself now the Millennium Falcon is composed of many different sub models that are children of each other so in order to set the cast Shadow and receive Shadow on each of those meshes to true we take advantage of the Traverse function on our mesh and that will recursively go through each child in the mesh tree and set these properties to true the last change is setting the cast Shadow and receive Shadow properties on our ground mesh since our ground is just a plane we don't need to cast any Shadows since nothing is below it and we'll set receive Shadow to true so that it can receive the Shadows cast by the Millennium Falcon we now see that we have hyper realistic Shadows unfortunately we have some artifacting occurring on the top of our Millennium Falcon now this is likely due to the geometry being so intricate fortunately we can make a minor adjustment to this to prevent this artifacting through some trial and error I set the bias on our Spotlight Shadow to minus .0001 now if I save this you can see that that artifacting has gone away completely and our shadows are looking really good we can even see that our antenna is casting Shadows on the body of the Millennium Falcon so there you have it you've learned how to add a 3D model to your scene how to add orbit controls so you can move and interact with that model as well as enabling Shadows to give your model a hyper realistic look I hope you've enjoyed this tutorial if you'd like to see more tutorials like this please suggest any topics in the comments and please be sure to like And subscribe to let me know that you're enjoying this content until next time take care everyone

Channel: Dan Greenheck

Views: 20,068

Keywords: three.js, gltf, glb, javascript, how to import 3d model with threejs, interactive 3d model on website, add 3d model to website, how to add 3d model to website, how to import gltf, threejs tutorial, three js tutorial, three.js tutorial, three js, threejs, load gltf model in three.js, load fbx model in three.js, how to load 3d model in three.js, load 3d model three.js, three js 3d model, import 3d model in three.js, three js import 3d model, 3d model, how to load 3d model in three js

Id: aOQuuotM-Ww

Length: 15min 3sec (903 seconds)

Published: Sun Jun 25 2023