JSARToolKit and Three.js - Augmented Alignment

Dan Bell
July 5, 2016

For using ARToolkit in a browser based application JSARToolKit is the perfect fit for any web framework. Augmented Alignment is a web page that uses JSARToolKit and Three.js to render 3D models over real world objects.

main image

The purpose of this article is to show you how to handle the ARView, including setting up the camera and model. When using an Augmented Reality application it is desirable to have as little lens distortion as possible for the camera. This is why camera parameters are important.

This is based heavily on the example provided with JSARToolKit for Three.js with some extension in presentation and functionality: https://artoolkit.github.io/jsartoolkit5/examples/pattern_threejs.html

To make the whole thing look at lot prettier, Twitter Bootstrap has been employed to create a responsive web page that works on a desktop or mobile device.

responsive example

Serving Files

The pages are static files - index.html, css and js files. However, to make the visualizer useful it would be good if it could select different camera parameters and model files.

parameter selection example

The php script below serves a list of files from a given folder on the server. This gets around delivering optional camera parameters or three.js models. Clearly, this is highly insecure and a real world implementation should have authentication as a minimum when dealing with a remote file system.

$folder_name = $_POST['FolderName'];
$dir = "Data/" . $folder_name . "/";
$return_array = array();
    if($dh = opendir($dir)){
        while(($file = readdir($dh)) != false){

            if($file == "." or $file == ".."){

            } else {
                $return_array[] = $file; // Add the file to the array
		$return = $return_array;
	echo json_encode($return);

Then, in the scripts section of the html page, the page will request the list of available camera parameters, models or marker info.

var  getPatternList = function(){
		type: "POST",
		url: "getCamParam.php",
		data: { "FolderName" : "Patterns"},
		cache: false,
		success: function(data){
			console.log(data); //"data" contains whatever someScript.php returned
			var dataList = JSON.parse(data);
			for(var i=0; i< dataList.length; i++)
				var val = dataList[i];
		error: function (request, error) {
			alert("Cannot load " + type + " list.");

When the modal dialog closes, an event is called to load the ARController using the filename of the camera parameters defined by the user, that are available on the server.

Setup The Camera

When the application starts, the user must select the correct camera parameters and the model file that they wish to use from the dropdown. The user must then select the appropriate camera that matches the camera parameters file that they have selected.

camera selection

Finally, the AR view is created and the user can use the TransformControls from Three.js to move the model to a suitable place within the frame.

scale image rotate image translate image

Using the controls it is possible to translate, rotate and scale the model displayed on the screen. The output of the Rotation and Transform is shown in the text boxes which can be edited in order to change the 3D model’s world location.