Author: Zach Spitulski
(Total Time: ~ 20 minutes)

A looping animation made in Blender. I’ll be using this model to animate in the web. You can use anything!

Rendering 3D on the web has historically been quite challenging, at least for more complex models. Not long ago, this meant setting up more complex WebGL scenes, doing heavy-lifting with OBJ files, or manually drawing shapes with Three.JS geometry.

However, recent developments with web technologies (specifically Three.JS and the latest GLTF 2.0 spec) allow us to move more efficiently than ever before. In this post, I’ll show you how to animate your own objects in the web using 3D tools. I won’t dive into 3D modeling, but will focus on the high level steps to create 3D in the web.

Tools Used:

  • Blender (v2.8+) and a basic understanding of the software
  • A 3D model of some sort within Blender
  • Three.JS: Free and well-supported 3D web rendering library

Part 1: Modeling and Animating

I won’t spend dive into the modeling part of this, as that is a world of tutorials in and of itself.

  1. Start simple here so you can get the workflow right. Animate your object using keyframes in Blender. I’ll keep mine short and simple with 20 frames on a loop to start. Make sure to set the ‘End’ of your animation timeline so Blender knows how long your loop is.
Note the ‘End’ input is set to 20 frames. This tells Blender how long the loop is.

2. Select your object, then go to File > Export > GLTF:

File > Export > GLTF 2.0 
Quick note: The file format we're using to transport and render our model in the web is the new GLTF 2.0 (where GLTF stands for "Graphics Library Transmission Format"). GLTF (and GLB) is commonly being referred to as the "JPEG for 3D" -- for good reason. It's objectively the first time in web history where a single file can efficiently transport 3D meshes, materials, and animation all in a single file.

3. Export as .GLB (not .GLTF). This is important! GLB is actually GLTF but is the more modern format and includes all dependencies. Also make sure Include > Limit to Selected Objects is checked. This file will contain your 3D model, animation, and materials — all in one file. Amazing! It’s worth noting that as of this writing, GLTF/GLB materials are limited to Principled BSDF. So if you have a more complex model and it’s appearing strange in the web, check your materials.

GLB/GLTF is commonly being referred to as the JPEG for 3D

Part 2: Setting up our 3D Web Canvas

In order to show our 3D model in the web, along with the animation, we’ll use ThreeJS. Specifically:

  • Three.JS (creates the 3D canvas in the web)
  • GLTFLoader (this loads in our GLTF/GLB file)
  • OrbitControls (to allow the user to move around the object)

Part 3: Bringing it all together

I used CodePen to create the scene. Feel free to edit/fork the file below. Once I have the workflow down, I start to create more complex animations. I hope this was helpful!

Here’s the final result:

See the Pen Animated Object with Three.JS and GLTF Model by Zach Spitulski (@zspitulski) on CodePen.