ThreeJS - 201 - Built in Helpers

Built in Axis, Spot Light, Grid Helps

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<h1>Three.js 201 - Built in Axis Helper</h1>
<ul>
    <li style="color:red">X Axis</li>
    <li style="color:green">Y Axis</li>
    <li style="color:blue">Z Axis</li>
</ul>
<div id="container"></div>

JavaScript

var width = 400;
var height = 300;
var aspect = width/height;
var near = 1;
var far = 1000;
var angle = 45;

var createRenderer = function(){
    var renderer =  new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    return renderer;
}

var createCamera = function(){
    var camera = new THREE.PerspectiveCamera(
        angle, aspect, near, far);    
    camera.position.set( 100, 100, 100 );
    camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
    return camera;
}


var createScene = function(){
    var scene = new THREE.Scene();
    return scene;
}

var createLight = function(){
    var light = new THREE.PointLight(0xFF0000);
    light.position.x=0;
    light.position.y=0;
    light.position.z=300;
    return light;
}

var createCube = function(){
    var cubeGeometry = new THREE.CubeGeometry(
        30,30,30);
    
    var material = 
        new THREE.MeshLambertMaterial(
            {
                color:0xFF0000
            });
    
    var cubeMesh = new THREE.Mesh(
        cubeGeometry,material);
    
    return cubeMesh;
  
};
var scene = createScene();
var camera = createCamera();

var light = createLight();
var cube = createCube();
var renderer = createRenderer();

scene.add(light);
scene.add(cube);
scene.add(new THREE.AxisHelper(100));
scene.add(new THREE.GridHelper(100,10));

//FIXME - Unable to figure out what is happening here
//scene.add(new THREE.PointLightHelper(light));
var render = function(){
   renderer.render(scene,camera);
}
render();
$("#container").append(renderer.domElement);