Three.js Loading Models

By cjgammon Last updated:

In my post on Geometry in Three.js I discussed the different types of primitives we have available. Primitives are a powerful tool but creating 3D objects with only primitives and code can only get you so far. For full control over your 3D models it is best to use a 3D modeling application and then import your models into Three.js.

Blender

There are many 3D modeling applications like Maya and Cinema 4D. But in this post we are going to focus on Blender because it is free and open-sourced. Also Three.js comes bundled with a plug-in that allows you to export content directly from Blender into a JSON format which can be loaded into Three.js. You can download Blender at blender.org, the version we are going to use is 2.77a.

The version of blender you are using is very important, as of Three.js v79 the plug-in packaged is recommended for Blender versions greater than or equal to 2.73. The exporter can be found in the utils directory on github. Copy the io_three directory into the scripts/addons folder of your Blender installation. This can be found in the following locations depending on your operating system.

Windows
C:Program FilesBlender FoundationBlender2.7Xscriptsaddons
OSX
/Users/(myuser)/Library/Application Support/Blender/2.7X/scripts/addons
Linux
/home/USERNAME/.config/blender/2.6X/scripts/addons

For it to be available, the exporter needs to be activated. This can be done by going into the File menu to User Preferences then selecting the Add-ons tab. Then check “Import-Export: Three.js Format”. You can then use it by going to File>Export>Three.js to generate the JSON format.

Loading

So now that you have your JSON file you need to load it into your Three.js application. You can do this using the JSONLoader class. You then call load() on the object passing in the url to the file as well as a callback method for when the file has loaded.

var loader = new THREE.JSONLoader();
loader.load('monkey.json', handle_LOADED);

The callback returns with two values. The geometry from your model and any materials in the model. Because the materials come back as an array of materials you can use them by passing them into the MultiMaterial class. Now you can continue to create your mesh with the geometry and your new material as you would normally.

function handle_LOADED(geometry, materials) {
	var material = new THREE.MultiMaterial(materials);
	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
}

Animation

We can also build animations in Blender with the timeline and keyframes. These animations can then be exported for Three.js as well. When you export your blender animation be sure that you have Morph Animation checked in the Export Settings.

To animate our mesh in Three.js we need to create a new material that has morphTargets set to true.

var material = new THREE.MeshLambertMaterial({morphTargets: true});

We then need to create an animation mixer, passing in the mesh. Then we create an animation clip using the morphTargets in the geometry, passing in a label and fps of the animation. Then in the last line of the following code we are setting the duration of the clip to 1 and telling it to play.

var mixer = new THREE.AnimationMixer(mesh);
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('talk', geometry.morphTargets, 30);
mixer.clipAction(clip).setDuration(1).play();

We then call update on our mixer in our animation loop, passing in the amount of time to increment the animation by.


mixer.update(timeinc);

Click here to download the demo.

Note: these examples were created using Three.js v79. Three.js is known to update frequently and sometimes cause breaking changes to the API so it may be worth checking the version you are using.