How to render your 3D Models on the Web with model-viewer
This week, while watching some videos from the Chrome Dev Summit 2019, I found out about the model-viewer web component, a simple yet powerful way of rendering 3D models on web pages and, optionally, in AR.
While unfortunately I couldn’t play around with its AR capabilities due to hardware restrictions on my part, I was nonetheless excited with the possibilities it opens.
So, I finished watching the video and went straight to the demo website to try out the code myself. However, I couldn’t just copy and paste the code, download a 3D model, open the HTML file and have the same demo up and running locally. I looked at the README on the project’s GitHub repository and then realized that I had to launch the file from a server to run the code succesfully.
And thus, my purpose today is to show you from beginning to end how you can have the following page
running on your machine.
To have the demo running, including the server, you will need:
- Node.js installed on your computer (you can find the installer here);
- A 3D model (you can download sample models from the project’s repository here; in the demo we will be using the RobotExpressive model);
- A code editor to write the HTML and CSS (for example, Sublime Text or Visual Studio Code).
Now that you have Node.js installed (at least I will assume so), you need to install a library that will be creating the server for us. For that, open the command line and enter:
npm install serve
We’ll come back to the serve library later.
Now, let’s write some code. Open your code editor and create a new HTML file. If you’re not familiar with HTML or CSS, don’t worry, you’ll just need to copy and paste the code provided. If you do know what’s going on with the code, feel free to improve on it and let me know what you come up with.
This is the code you will need for the HTML file:
As you can see, you don’t even need to write your own JavaScript to make it work. Simply load the model-viewer with the script element at the end of the file and then write model-viewer as if it was a standard HTML element (notice how similiar it is to the existing img and video elements). By the way, don’t forget to change href on line 6 to the name of the CSS file you create, otherwise the HTML won’t know how to find your CSS.
At minimum, you only need to specify the source of the 3D model (note that it only accepts glTF and GLB models). But, in this case, we add auto-rotate so the model rotates on its own and camera-controls so that the user can interact with the model. background-color simply changes the background color of the model-viewer element.
Now, we also need to create a CSS file to style the page, with the following code:
Pretty standard CSS in my opinion, though if you are unfamiliar with the CSS Grid Layout, I did write a quick introductory article about it here.
Now that we have all the code written, we just need to launch the server and open our HTML file in the browser through the server. For that, open the command line and navigate to the folder where you have your HTML, CSS and 3D model. If you’re not sure how to do it, for Windows users, the easiest way to do it is to click in the path of your folder, and copy it:
Then, on the command line enter cd followed by the path you have copied (with the help of the ever helpful Ctrl+v to paste it).
Finally, enter serve, which will start the server almost instantaneously. The very last thing you need to is to go to your browser and enter localhost:5000/<name-of-your-html-file>. For example, mine is localhost:5000/model-demo-viewer.
And that’s it. If you have copied the code I provided and used the same sample 3D model, you should be looking at this screen
And that’s it. If you want to learn more about model-viewer, these are some helpful links:
Hope you have fun playing around with model-viewer. If you have a smartphone that supports ARCore, then try out this demo on your phone (simply add ar as an attribute to model-viewer and then open the HTML file in your phone).
