Debug Axes in three.js
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.

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.