This is a futuristic paperweight I designed in Blender, a 3D modeling tool. I did some modeling in college, but it didn’t help with this kind of modeling :/ This model is available to download on the Free 3D Models page.

To export your own models from Blender to JSON files, you’ll need to install the three.js blender exporter tool . Instructions can be found at the link and involve copying a folder to your Blender install and activating the addon in the program. Once you install the exporter, the export to three.js option will be available.

There are a few things you should know about exporting models using this exporter.

1 Select the model before exporting

Make sure you’re in object-mode then right-click on your object. You can only export one object, so selecting one tells Blender what you want to export.

2 Choose Features to Export

After going to file->export->Three.js(.json) a window opens with many options. For my Blender model, I chose to only export the geometry, but UV maps, bones, skinning and animation are also available for export. Make sure the checkboxes are selected for the features you want to export.

Slap It on the Canvas

Ok, now that you have your JSON file we can get it into the browser. To get started, we’ll use this basic template that I use in a lot of posts. Open the template to follow along.

var mesh = new THREE.Object3D();
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('/js/models/paperweight/paperweight.json',
	function (geometry, materials) {
		mesh = new THREE.Mesh(geometry,
			new THREE.MeshLambertMaterial({color: '#9e6039'}));
		scene.add(mesh);
	}
);

camera.position.set(0, 1.8, 4);

You can add this to the render function to give the model some rotation.

mesh.rotation.y += 0.01;