CanvasRenderer/SVGRenderer/SoftwareRenderer: Added basic scene.background support.

examples/js/renderers/CanvasRenderer.js

@@ -319,7 +319,18 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 		}
 
-		if ( this.autoClear === true ) this.clear();
+		var background = scene.background;
+
+		if ( background && background.isColor ) {
+
+			setFillStyle( 'rgb(' + Math.floor( background.r * 255 ) + ',' + Math.floor( background.g * 255 ) + ',' + Math.floor( background.b * 255 ) + ')' );
+			_context.fillRect( 0, 0, _canvasWidth, _canvasHeight );
+
+		} else if ( this.autoClear === true ) {
+
+			this.clear();
+
+		}
 
 		_this.info.render.vertices = 0;
 		_this.info.render.faces = 0;

examples/js/renderers/SVGRenderer.js

@@ -104,7 +104,7 @@ THREE.SVGRenderer = function () {
 
 	};
 
-	this.clear = function () {
+	function removeChildNodes() {
 
 		_pathCount = 0;
 		_lineCount = 0;
@@ -116,7 +116,12 @@ THREE.SVGRenderer = function () {
 
 		}
 
-		_svg.style.backgroundColor = 'rgba(' + ( ( _clearColor.r * 255 ) | 0 ) + ',' + ( ( _clearColor.g * 255 ) | 0 ) + ',' + ( ( _clearColor.b * 255 ) | 0 ) + ',' + _clearAlpha + ')';
+	}
+
+	this.clear = function () {
+
+		removeChildNodes();
+		_svg.style.backgroundColor = 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')';
 
 	};
 
@@ -129,7 +134,18 @@ THREE.SVGRenderer = function () {
 
 		}
 
-		if ( this.autoClear === true ) this.clear();
+		var background = scene.background;
+
+		if ( background && background.isColor ) {
+
+			removeChildNodes();
+			_svg.style.backgroundColor = 'rgb(' + Math.floor( background.r * 255 ) + ',' + Math.floor( background.g * 255 ) + ',' + Math.floor( background.b * 255 ) + ')';
+
+		} else if ( this.autoClear === true ) {
+
+			this.clear();
+
+		}
 
 		_this.info.render.vertices = 0;
 		_this.info.render.faces = 0;

examples/js/renderers/SoftwareRenderer.js

@@ -81,7 +81,7 @@ THREE.SoftwareRenderer = function ( parameters ) {
 	this.setClearColor = function ( color, alpha ) {
 
 		clearColor.set( color );
-		cleanColorBuffer();
+		clearColorBuffer( clearColor );
 
 	};
 
@@ -131,7 +131,7 @@ THREE.SoftwareRenderer = function ( parameters ) {
 
 		}
 
-		cleanColorBuffer();
+		clearColorBuffer( clearColor );
 
 	};
 
@@ -156,10 +156,19 @@ THREE.SoftwareRenderer = function ( parameters ) {
 
 	};
 
-    // TODO: Check why autoClear can't be false.
+
 	this.render = function ( scene, camera ) {
 
-		if ( this.autoClear === true ) this.clear();
+		// TODO: Check why autoClear can't be false.
+		this.clear();
+
+		var background = scene.background;
+
+		if ( background && background.isColor ) {
+
+			clearColorBuffer( background );
+
+		}
 
 		var renderData = projector.projectScene( scene, camera, false, false );
 		var elements = renderData.elements;
@@ -362,23 +371,24 @@ THREE.SoftwareRenderer = function ( parameters ) {
 
 		}
 
-		cleanColorBuffer();
+		clearColorBuffer( clearColor );
+
 	}
 
-	function cleanColorBuffer() {
+	function clearColorBuffer( color ) {
 
 		var size = canvasWidth * canvasHeight * 4;
 
 		for ( var i = 0; i < size; i += 4 ) {
 
-			data[ i ] = clearColor.r * 255 | 0;
-			data[ i + 1 ] = clearColor.g * 255 | 0;
-			data[ i + 2 ] = clearColor.b * 255 | 0;
+			data[ i ] = color.r * 255 | 0;
+			data[ i + 1 ] = color.g * 255 | 0;
+			data[ i + 2 ] = color.b * 255 | 0;
 			data[ i + 3 ] = alpha ? 0 : 255;
 
 		}
 
-		context.fillStyle = alpha ? "rgba(0, 0, 0, 0)" : clearColor.getStyle();
+		context.fillStyle = alpha ? "rgba(0, 0, 0, 0)" : color.getStyle();
 		context.fillRect( 0, 0, canvasWidth, canvasHeight );
 
 	}