📝Penn Week 15a — 3D On the Web

Credit

This demo is based on Sukanya Aneja’s presentation at The Brown Institute’s Fall 2021 event, The Wrangler. Sukanya works at R&D at The New York Times. 

I’m also using definitions from Google’s developer documentation.

Tools

Blender

Getting Started

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. 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.
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Setting up the model viewer

You can use the model viewer like an HTML element. The first thing we’ll do is set up the model viewer element in the body, like so:

<model-viewer src="https://cif21.labud.nyc/assets/astronaut.glb">
</model-viewer>

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.
<model-viewer src="https://cif21.labud.nyc/assets/astronaut.glb" camera-controls>
</model-viewer>