We’re going to use Google’s Model Viewer and their editor to manipulate a 3D Model. In the past, using 3D on a web context was far more cumbersome. Earlier this semester we looked at the JavaScript library three.js which has a steeper learning curb. The Model Viewer helps us use 3D elements in a way that is more similar to HTML.
Workspace
Set up a boiler plate index.html file
Create an assets folder. Save a main.css file there.
Link to the Model Viewer library by pasting this into the head. You can also find this on the model viewer homepage.
We’re linking to a 3d file(.glb) I previously uploaded onto Glitch. Using local assets is a little trickier with this method, so if you’d like to use your own 3d file you’ll need to upload the .glb asset online and use the URLÂ
It won’t show up until we add a height and width to this element. To do so, target the model-viewer in the main.css file.
CSS
body {
 background-color: black;
 margin: 0;
}
model-viewer {
 width: 80vw;
 height: 80vh;
}
Â
Â
Â
Â
Adding More Controls
This places the astronaut onto the document, but it’s pretty static. We’ll need to edit our code to add more controls.
Similar to HTML videos, we can add controls in line with the model viewer. Try adding in the following:
camera-controls
Allows you to move the camera around and rotate the object.
Credit
Tools
Getting Started
Workspace
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>Setting up the model viewer
<model-viewer src="https://cif21.labud.nyc/assets/astronaut.glb"></model-viewer>body {Â background-color: black;Â margin: 0;}
model-viewer {Â width: 80vw;Â height: 80vh;}Adding More Controls
<model-viewer src="https://cif21.labud.nyc/assets/astronaut.glb" camera-controls></model-viewer>