WebGL (Three.js) simple application

Question

I have done the source code for my lesson, which I shall publish later on my website:

<script src="three.min.js"></script>
<script>
var renderer, scene, camera, geometry, material, mesh, light, axisRotation;
function createScene() {
 renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 camera.position.set( 3, 3, 3 );
 camera.lookAt( scene.position );
 scene.add( camera );
 geometry = new THREE.CubeGeometry( 1, 1, 1 );
 material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
 mesh = new THREE.Mesh( geometry, material );
 scene.add( mesh );
 light = new THREE.PointLight( 0xffff00 );
 light.position.set( 10, 10, 10 );
 scene.add( light );
}
function rotateCube( axis ) {
 switch ( axis ) {
 case 'x':
 mesh.rotation.x += 0.02;
 break;
 case 'y':
 mesh.rotation.y += 0.02;
 break;
 case 'z':
 mesh.rotation.z += 0.02;
 break;
 }
}
function toggleObjectWireframe() {
 material.wireframe = !material.wireframe;
}
function renderScene() {
 renderer.render( scene, camera );
}
function animateScene() {
 requestAnimationFrame( animateScene );
 renderScene();
 rotateCube( axisRotation );
}
function getChar( event ) {
 var inputChar = null;
 if ( event.which === null ) {
 if ( event.keyCode < 32 ) inputChar = null;
 else inputChar = String.fromCharCode( event.keyCode );
 }
 if ( event.which != 0 && event.charCode != 0 ) {
 if ( event.which < 32 ) inputChar = null;
 else inputChar = String.fromCharCode( event.which );
 }
 if ( ~['x', 'y', 'z'].indexOf( inputChar ) ) {
 axisRotation = inputChar;
 }
 else if ( inputChar == 'w' ) toggleObjectWireframe();
 else inputChar = null;
}
function initWebGLApp() {
 axisRotation = 'x';
 createScene();
 animateScene();
}
function setCssStyle() {
 document.body.style.width = "100%";
 document.body.style.height = "100%";
 document.body.style.margin = 0;
 document.body.style.padding = 0;
 document.querySelector('canvas').style.display = 'block';
}
window.onload = function() {
 initWebGLApp();
 setCssStyle();
 document.onkeypress = getChar;
}
</script>

You can see the working results on JSFiddle.

Answer 1

This code is good for tutorial use.

Some suggestion:

You are switching over 'x','y' and 'z' :

function rotateCube( axis ) {
 switch ( axis ) {
 case 'x':
 mesh.rotation.x += 0.02;
 break;
 case 'y':
 mesh.rotation.y += 0.02;
 break;
 case 'z':
 mesh.rotation.z += 0.02;
 break;
 }
}

You could simply use axis straight.

function rotateCube( axis ) {
 mesh.rotation[axis] += 0.02;
}

You could explain some of your magical constants, like 10000, it is those values that always throw me off when I experiment with this 3d library.

You should probably extract your rgb codes into well named variables like cubeColor, pointLightColor etc.

This line could use some comment: requestAnimationFrame( animateScene );

One liner functions that are called only once are wrong, I'd much rather you keep those lines in-line with a comment above them as to what is going on.

function renderScene() {
 renderer.render( scene, camera );
}
function animateScene() {
 requestAnimationFrame( animateScene );
 renderScene();
 rotateCube( axisRotation );
}

is less readable than

function animateScene() {
 requestAnimationFrame( animateScene );
 //Render scene
 renderer.render( scene, camera );
 rotateCube( axisRotation );
}

You could merge the treatment of keyCode and which.

var inputChar = null;
if ( event.which === null ) {
 if ( event.keyCode < 32 ) inputChar = null;
 else inputChar = String.fromCharCode( event.keyCode );
}
if ( event.which != 0 && event.charCode != 0 ) {
 if ( event.which < 32 ) 
 inputChar = null;
 else 
 inputChar = String.fromCharCode( event.which );
}

you can change the above to

var keyCode = event.keyCode || event.which,
 inputChar = keyCode < 32 ? null : String.fromCharCode( keyCode );

Though I will admit that might be too Golfic for a tutorial, you could turn the ternary into a regular if statement to keep things easy.

Furtermore, from a style perspective, your if's look bad

 if ( event.keyCode < 32 ) inputChar = null;
 else inputChar = String.fromCharCode( event.keyCode );

should be

 if ( event.keyCode < 32 ) 
 inputChar = null;
 else 
 inputChar = String.fromCharCode( event.keyCode );

and

if ( ~['x', 'y', 'z'].indexOf( inputChar ) ) {
 axisRotation = inputChar;
}
else if ( inputChar == 'w' ) toggleObjectWireframe();
else inputChar = null;

should be either

if ( ~['x', 'y', 'z'].indexOf( inputChar ) ) {
 axisRotation = inputChar;
}
else if {
 ( inputChar == 'w' ) toggleObjectWireframe();
}
else { 
 inputChar = null;
}

or

if ( ~['x', 'y', 'z'].indexOf( inputChar ) )
 axisRotation = inputChar;
else if ( inputChar == 'w' ) 
 toggleObjectWireframe();
else 
 inputChar = null;

I would advocate the second approach.

Furthermore, the following 2 lines seem pointless, I took them out in the fiddle, and it works just fine;

document.body.style.width = "100%";
document.body.style.height = "100%";

Finally, this :

document.onkeypress = getChar;

is old skool, and should be avoided in general, I understand it is easy for a tutorial, but you should at least put a line of comment that this is not ideal.

All in all, I like your code, even though this review got a bit lengthy.