AxisHelper not showing colored - three.js

Question

I'm trying to add an AxisHelper to my three.js project. I added it like this:
axes = new THREE.AxisHelper(100);
scene.add(axes);
It gets added, but it isn't colored It's solid white, and therefore hard to see. How can I make it the regular colors?
JSFiddle
var container;
var camera, scene, axis, renderer;
init();
animate();
function init() {
container = document.getElementById('container');
// Camera
camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -500, 1000);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
// Scene
scene = new THREE.Scene();
// Axis
axes = new THREE.AxisHelper(100);
scene.add(axes);
// Grid
var size = 500,
step = 50;
var geometry = new THREE.Geometry();
for (var i = -size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(-size, 0, i));
geometry.vertices.push(new THREE.Vector3(size, 0, i));
geometry.vertices.push(new THREE.Vector3(i, 0, -size));
geometry.vertices.push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial({
color: 0x000000,
opacity: 0.2
});
var line = new THREE.LineSegments(geometry, material);
scene.add(line);
// Cubes
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshLambertMaterial({
color: 0xffffff,
overdraw: 0.5
});
var cube = new THREE.Mesh(geometry, material);
cube.scale.y = 1;
cube.position.x = 0;
scene.add(cube);
// Lights
var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
// Render
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// Events
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.left = window.innerWidth / -2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / -2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 200;
camera.position.z = Math.sin(timer) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
<div id="container"></div>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/renderers/Projector.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/renderers/CanvasRenderer.js"></script>

Answer 1

You can get CanvasRenderer to properly render the colored axes of AxisHelper like so:
var axes = new THREE.AxisHelper( 100 );
axes.geometry = new THREE.Geometry().fromBufferGeometry( axes.geometry );
scene.add( axes );
CanvasRenderer has a bug, and does not properly render vertex colors when the geometry is BufferGeometry. The above is a work-around.
three.js r.82