Search⌘ K
Home/
Courses/
Learn Three.js for 3D Computer Graphics

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

Learn how to load and use the Quake, COLLADA, and BHV models in Three.js.

We'll cover the following...

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
})
...