Let's quickly create a folder for our project and open it in Visual Studio Code Create a new HTML file This is my 3D model, which I will bring into the project Install the Live Server extension if you don't have it It will launch a local server with live reload Time to add some boilerplate HTML Remove any padding from the page Let's first find the ES Module Shims repository which will help us import maps and use modules on the web Copy the link to the script Add it inside our code. Now we can use some modern features Checking for errors in the console (CTRL + SHIFT + I in Chrome) Let's specify an import map and let's map the threejs module, which we need for the project We can find it on unpkg Select the latest version Copy and add the link, remove the "browse" part Checking again for errors Let's create a module and import Three.JS We also import a module for controlling the camera which we can find in the same place at unpkg Copy, paste and remove the "browse" part And lastly a module for loading GLB objects Time to create our scene. But we need a renderer first Enable antialiasing Make it as big as the window Add the renderer to the entire body of the document Refresh and see how the canvas element is created for the rendering And now our scene, to which we will add everything else I gave it a black background but you can pick your color We will need a camera to look into our scene These parameters define the viewing frustum (fov, aspect, near, far) Set it in a position above and in front of the center of the scene Some ambient light would be nice Would be cool to be able to orbit around the object which is why we needed the OrbitControls that will make this happen This tells the renderer to update the scene when orbiting around it and this will make the camera orbit the center of the scene Finally, we load our 3D object Specify the path to the GLB file This callback will be invoked when the object is loaded Inside we can get our model And set it to be in the center of the scene If there's an error, we should see it in the console Let's test it now Nothing, one last thing is missing We must render our scene once the model is added to it Here we go but it's a bit too dark (also, check for errors) We can orbit and pan using the mouse and keyboard But let's add a directional light, too It takes as parameters a color and the intensity of the light Now, that's more like it The scene is not resized so we will have to fix that, too Update the camera aspect according to the new window size and the render size That's what we wanted. Congratulations for making it so far!
