Merge pull request #14721 from devnook/offscreencanvas

Improve offscreencanvas example for cross-browser inter operability

examples/js/workers/OffscreenCanvas.js

@@ -9,6 +9,14 @@ 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,19 +33,22 @@ 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 );
+
+		animate();
 
-		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-		mesh = new THREE.Mesh( geometry, material );
+	}, null, function () {
 
+		// 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 );
@@ -53,6 +64,14 @@ function animate() {
 
 	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 );
+
+	}
 
 }