hacked interactive cubes example to show floating point issues with float32 matrices

examples/webgl_interactive_cubes.html

@@ -25,7 +25,8 @@
 			var camera, scene, raycaster, renderer;
 
 			var mouse = new THREE.Vector2(), INTERSECTED;
-			var radius = 100, theta = 0;
+                        var radius = 1, theta = 0;
+                        var offset = new THREE.Vector3(100000, 100000, 100000);
 
 			init();
 			animate();
@@ -43,7 +44,7 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes';
 				container.appendChild( info );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
 
 				scene = new THREE.Scene();
 
@@ -51,25 +52,24 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new THREE.BoxBufferGeometry( .001, .1, .1 );
 
-				for ( var i = 0; i < 2000; i ++ ) {
+				for ( var j = 0; j < 10; j ++ ) {
+					for ( var k = 0; k < 10; k ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+						var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
-					object.position.x = Math.random() * 800 - 400;
-					object.position.y = Math.random() * 800 - 400;
-					object.position.z = Math.random() * 800 - 400;
+						var position = new THREE.Vector3( 0, j/10, k/10 );
+						position.add( offset );
 
-					object.rotation.x = Math.random() * 2 * Math.PI;
-					object.rotation.y = Math.random() * 2 * Math.PI;
-					object.rotation.z = Math.random() * 2 * Math.PI;
+						var scale = new THREE.Vector3( 0.1, 1, 1 );
 
-					object.scale.x = Math.random() + 0.5;
-					object.scale.y = Math.random() + 0.5;
-					object.scale.z = Math.random() + 0.5;
+						object.matrixAutoUpdate = false;
+						object.matrix.setPosition( position );
+						object.matrix.scale( scale );
 
-					scene.add( object );
+						scene.add( object );
+					}
 
 				}
 
@@ -124,11 +124,14 @@
 
 			function render() {
 
-				theta += 0.1;
+				theta = 20;
 
 				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
+
+				camera.position.add( offset );
+
 				camera.lookAt( scene.position );
 
 				camera.updateMatrixWorld();