Three.js World

 Tutorials Featured Free 3D Models About

Character Rigging: Exporting a Model from Blender to three.js

Tutorials

advanced rigging featured

Last updated: January 28, 2017
Three.js Version: r85

Meet Hugbot. A robot designed for expressing affection. It can be yours for 9000 dollars US or by downloading it from the Free 3D Models area and following this tutorial.

See this example from the docs of what can be achieved

To get started, we’ll use this basic template that I use in a lot of posts. Open the template to follow along.

We’ll import Hugbot with a JSONLoader. The Hugbot model was made in Blender with armatures or bones which form a skeleton. The skeleton can then be manipulated to move the model’s vertices around.

To make this process work with your own rigged models, make sure you export with “bones” and “skinning” along with the rest of your model. You might want to check out my post about exporting from Blender.

Also, use the SkinnedMesh class which will add a skeleton array to the mesh and read the “mesh skin weighting.” This information tells the renderer how much to stretch the mesh for each bone in question.

var mesh = new THREE.Object3D();
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('/js/models/hugbot/hugbot.json',
	function (geometry, materials) {
		// SkinnedMesh instead of Mesh
		mesh = new THREE.SkinnedMesh(geometry,
		new THREE.MeshLambertMaterial({
			color: '#75b6fb',
			transparent: true,
			opacity: 0.9,
			skinning: true // DON'T FORGET THIS!!!
		}));
		mesh.rotation.y = -Math.PI / 2;
		scene.add(mesh);
	}
);

camera.position.set(0, 3, 7);

It’s better to create animations in Blender first so you can take advantage of inverse kinematics and three.js’s animation mixer, but for simple animations, moving individual bones is fine.

Since I want to create an oscillating movement, I’ll use sine and cosine functions to save me from using lots of logic and to create a nice easing effect.

Here’s an illustration of the concept:

Now put the following code in your render function to make your Hugbot come to life!

mesh.rotation.y += 0.01;
if (mesh.skeleton) {
	// right foot
	mesh.skeleton.bones[0].rotation.x = -0.2 * Math.sin(2 * osc) - 0.1;
	mesh.skeleton.bones[0].rotation.y = -0.2 * Math.cos(2 * osc) - 0.1;
	// left foot
	mesh.skeleton.bones[1].rotation.x = -0.2 * Math.cos(2 * osc) - 0.1;
	mesh.skeleton.bones[1].rotation.y = -0.2 * Math.sin(2 * osc) - 0.1;
	// body
	mesh.skeleton.bones[2].rotation.x = 0.1 * Math.sin(2 * osc);
	mesh.skeleton.bones[2].rotation.z = 0.2 * Math.sin(osc) + 0.1;
	// left upper arm
	mesh.skeleton.bones[3].rotation.x = 0.5 * Math.sin(osc) + 0.5;
	mesh.skeleton.bones[3].rotation.y = -Math.sin(osc) - 0.8;
	// right upper arm
	mesh.skeleton.bones[5].rotation.x = -0.5 * Math.sin(osc) - 0.5;
	mesh.skeleton.bones[5].rotation.y = Math.sin(osc) + 0.8;
	// left lower arm
	mesh.skeleton.bones[4].rotation.x = 0.2 * Math.sin(osc) + 0.2;
	// right lower arm
	mesh.skeleton.bones[6].rotation.x = -0.2 * Math.sin(osc) - 0.2;
}
osc += 0.05;

This article was brought to you by Marty Boggs. To find out about new articles, subscribe below.

How I Made a 3D Ragdoll Game with JavaScript

Tutorials

advanced, physics, featured, sound, lighting, shadows,

Like most people, I love animated violence. It feels good to break things or knock them over. Maybe it’s to assert our dominance. Maybe it’s to destroy the weak making way for the strong. I don’t know, but here’s how I programmed a bird. ...

Getting Started with three.js

Tutorials

beginner,

Using three.js is a great way to incorporate 3D graphics into your browser whether it’s on a ...

Build a Star Wars Droid in three.js

Tutorials

featured,

I just saw Rogue One, so this next example features a Star Wars like droid. BB-8 may be your only hope… ...