Improve offscreencanvas example for cross-browser op

examples/js/workers/OffscreenCanvas.js

@@ -9,6 +9,12 @@ self.onmessage = function ( message ) {
 
 var camera, scene, renderer, mesh, clock;
 
+function createBoxMesh( size, material ) {
+	var material = new THREE.MeshBasicMaterial(material);
+	var geometry = new THREE.BoxBufferGeometry(size, size, size);
+	return new THREE.Mesh(geometry, material);
+}
+
 function init( offscreen, width, height, pixelRatio ) {
 
 	camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
@@ -25,23 +31,23 @@ function init( offscreen, width, height, pixelRatio ) {
 	loader.load( '../../textures/crate.gif', function ( imageBitmap ) {
 
 		var texture = new THREE.CanvasTexture( imageBitmap );
-		var material = new THREE.MeshBasicMaterial( { map: texture } );
+		mesh = createBoxMesh(200, { map: texture });
+		scene.add( mesh );
 
-		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-		mesh = new THREE.Mesh( geometry, material );
+		animate();
 
+	}, null, function(e) {
+		// On error use color instead of texture.
+		mesh = createBoxMesh(200, { color: 0x00ff00 });
 		scene.add( mesh );
 
 		animate();
 
 	} );
 
-	//
-
-	renderer = new THREE.WebGLRenderer( { antialias: true, canvas: offscreen } );
-	renderer.setPixelRatio( pixelRatio );
-	renderer.setSize( width, height, false );
-
+	renderer = new THREE.WebGLRenderer({ antialias: true, canvas: offscreen });
+	renderer.setPixelRatio(pixelRatio);
+	renderer.setSize(width, height, false);
 }
 
 function animate() {
@@ -52,7 +58,10 @@ function animate() {
 	mesh.rotation.y += delta * 0.5;
 
 	renderer.render( scene, camera );
-
-	renderer.context.commit().then( animate );
+	if (self.requestAnimationFrame) {
+		self.requestAnimationFrame(animate);
+	} else if (renderer.context.commit) {
+		renderer.context.commit().then(animate);
+	}
 
 }