Press Space Bar to Change Colors


See how the abstraction of THREE.JS allows one to build upon WebGL in fewer lines of code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var vector = new THREE.Vector3();

var geometry = new THREE.BoxGeometry( 2, 2, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
	requestAnimationFrame( animate );
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	renderer.render( scene, camera );
};

var onKeyDown = function(event) {
  if (event.keyCode == 32 && event.target == document.body) { // when 'space' is pressed
		event.preventDefault();
    color = +(Math.random()*0xFFFFFF<<0);
    console.log(color);
    cube.material.color.setHex(color);
    document.getElementById('info').innerHTML = "Color: #" + color.toString(16);
    document.getElementById('info').style.color = "#" + color.toString(16)
  }
};

document.addEventListener('keydown', onKeyDown, false);

animate();