Search⌘ K
AI Features

Animations with External Models: Quake, COLLADA, and BHV Model

Explore how to load and animate external 3D models in Three.js using formats such as MD2 for Quake models, COLLADA for compressed and uncompressed assets, and BVH for skeleton animations. Learn to integrate these models with custom materials, animate them in a scene, and visualize skeletons using SkeletonHelper for dynamic and interactive 3D scenes.

FBX and glTF are modern formats that are used a lot and are a good way to exchange models and animations. There are a couple of older formats around as well. An interesting one is a format used by the old FPS Quake: MD2.

Loading an animation from a Quake model

The MD2 format was created to model characters from Quake, a great game from 1996. Even though the newer engines use a different format, we can still find a lot of interesting models in the MD2 format. Using an MD2 file is a bit different than using the others we’ve seen so far. When we load an MD2 model (line 3), we get a geometry, so we have to make sure that we create a material (lines 4–9) as well and assign a skin (lines 7–8):

Javascript (babel-node-es2024)
let animations = []
const loader = new MD2Loader()
loader.loadAsync('/assets/models/ogre/ogro.md2').then((object) => {
const mat = new THREE.MeshStandardMaterial({
color: 0xffffff,
metalness: 0,
map: new THREE.TextureLoader().load
('/assets/models/ogre/skins/skin.jpg')
})
animations = object.animations
const mesh = new THREE.Mesh(object, mat)
// add to scene, and you can animate it as we've seen already
})
...