Three.js - Helpers

It is nice to have some HelperGrids and Vectors for your orientation in your scene. Here is how you can add some helpers.

Axes

Let's start with some simple axes in the center. The axes are X, Y and Z. The size in this example is 2.

    //axes
    var axes = new THREE.AxisHelper(2);
    scene.add(axes);

Grids

For a simple xz grid you can use GridHelper(SIZE, LINESPACE);

   
//grid xz
 var gridXZ = new THREE.GridHelper(10, 1);
 scene.add(gridXZ);

You can color the centerlines and lines, change the center and rotation for other grids.

   
//grid xz
 var gridXZ = new THREE.GridHelper(10, 1);
 gridXZ.position.set(10,0,10);
 scene.add(gridXZ);
 
 //grid xy
 var gridXY = new THREE.GridHelper(5, 1);
 gridXY.rotation.x = Math.PI/2;
 gridXY.position.set(5,5,0);
 gridXY.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
 scene.add(gridXY);
 
 //grid yz
 var gridYZ = new THREE.GridHelper(2, 0.5);
 gridYZ.position.set( 0,2,2 );
 gridYZ.rotation.z = Math.PI/2;
 gridYZ.setColors( new THREE.Color(0xffffff), new THREE.Color(0x00ff00) );
 scene.add(gridYZ);