Debug Axes in three.js

First published: Read time: 2 mins

Update: The code I had previously stopped working with the latest three.js API. I’ve updated and improved the code for the latest API.

I’ve been working on a couple of small projects using three.js recently; An issue I always seem to have when working with 3D is knowing the current orientation. To help me out I’ve put together a small snippet of JavaScript.

Creating a set of axis in three.js
{x: red, y: green, z: blue} It's not much to look at but the axes can be very useful.

The point where the lines cross is 0,0,0 as you’d expect, you can adjust the length of the line by changing the axisLength variable. I’ve uploaded a small demo so you can see the code used or copy / paste below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var debugaxis = function(axisLength){
    //Shorten the vertex function
    function v(x,y,z){
            return new THREE.Vertex(new THREE.Vector3(x,y,z));
    }

    //Create axis (point1, point2, colour)
    function createAxis(p1, p2, color){
            var line, lineGeometry = new THREE.Geometry(),
            lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
            lineGeometry.vertices.push(p1, p2);
            line = new THREE.Line(lineGeometry, lineMat);
            scene.add(line);
    }

    createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000);
    createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00);
    createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
};

//To use enter the axis length
debugaxis(100);

It’s not much to look at, but it can certainly help you get your bearing when starting a new project (or when things aren’t working!). Hopefully you find it useful.