Examples: Replaced relevant renderer.setClearColor() with scene.background.

examples/canvas_ascii_effect.html

@@ -62,6 +62,7 @@
 				controls = new THREE.TrackballControls( camera );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var light = new THREE.PointLight( 0xffffff );
 				light.position.set( 500, 500, 500 );
@@ -82,7 +83,6 @@
 				scene.add( plane );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( width, height );
 				// container.appendChild( renderer.domElement );
 

examples/canvas_camera_orthographic.html

@@ -49,6 +49,7 @@
 				camera.position.y = 400;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// Grid
 
@@ -94,7 +95,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_camera_orthographic2.html

@@ -118,6 +118,7 @@
 				camera.position.z = 200;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// Grid
 
@@ -163,7 +164,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_geometry_birds.html

@@ -342,6 +342,7 @@
 				camera.position.z = 450;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				birds = [];
 				boids = [];
@@ -366,7 +367,6 @@
 				}
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 

examples/canvas_geometry_cube.html

@@ -60,6 +60,8 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+
 
 				// Cube
 
@@ -90,7 +92,6 @@
 				scene.add( plane );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_geometry_earth.html

@@ -62,6 +62,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				group = new THREE.Group();
 				scene.add( group );
@@ -111,7 +112,6 @@
 				group.add( mesh );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_geometry_hierarchy.html

@@ -50,6 +50,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 				var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );
@@ -73,7 +74,6 @@
 				scene.add( group );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_geometry_nurbs.html

@@ -71,6 +71,7 @@
 				camera.position.set( 0, 150, 500 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				group = new THREE.Group();
 				group.position.y = 50;
@@ -127,7 +128,6 @@
 				//
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_geometry_shapes.html

@@ -61,6 +61,7 @@
 				camera.position.set( 0, 150, 500 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				group = new THREE.Group();
 				group.position.y = 50;
@@ -293,7 +294,6 @@
 				//
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortElements = false;

examples/canvas_geometry_terrain.html

@@ -67,6 +67,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xbfd1e5 );
 
 				var data = generateHeight( 1024, 1024 );
 				var texture = new THREE.CanvasTexture( generateTexture( data, 1024, 1024 ) );
@@ -88,7 +89,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xbfd1e5 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/canvas_geometry_text.html

@@ -66,6 +66,7 @@
 				camera.position.set( 0, 150, 500 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// Get text from hash
 
@@ -112,7 +113,6 @@
 				scene.add( group );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_interactive_cubes.html

@@ -53,6 +53,7 @@
 				camera.position.set( 0, 300, 500 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
@@ -97,7 +98,6 @@
 				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_interactive_cubes_tween.html

@@ -52,6 +52,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
@@ -77,7 +78,6 @@
 				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/canvas_interactive_particles.html

@@ -71,6 +71,7 @@
 				camera.position.set( 0, 300, 500 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				for ( var i = 0; i < 100; i ++ ) {
 
@@ -89,7 +90,6 @@
 				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_interactive_voxelpainter.html

@@ -54,6 +54,7 @@
 				camera.lookAt( new THREE.Vector3() );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// Grid
 
@@ -95,7 +96,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/canvas_lines_dashed.html

@@ -61,8 +61,7 @@
 				camera.position.z = 150;
 
 				scene = new THREE.Scene();
-
-				scene.fog = new THREE.Fog( 0x111111, 150, 200 );
+				scene.background = new THREE.Color( 0x111111 );
 
 				root = new THREE.Object3D();
 
@@ -99,7 +98,6 @@
 				scene.add( object );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0x111111 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 

examples/canvas_materials_video.html

@@ -67,6 +67,7 @@
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				video = document.getElementById( 'video' );
 
@@ -150,7 +151,6 @@
 				}
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_morphtargets_horse.html

@@ -51,6 +51,7 @@
 				camera.target = new THREE.Vector3( 0, 150, 0 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				//
 
@@ -85,7 +86,6 @@
 				//
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/canvas_particles_sprites.html

@@ -47,6 +47,7 @@
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000040 );
 
 				var material = new THREE.SpriteMaterial( {
 					map: new THREE.CanvasTexture( generateSprite() ),
@@ -63,7 +64,6 @@
 				}
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0x000040 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_performance.html

@@ -39,6 +39,7 @@
 				document.body.appendChild( container );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 1000, 1000 );
@@ -79,7 +80,6 @@
 				scene.add( light );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/canvas_sandbox.html

@@ -44,6 +44,7 @@
 				var controls = new THREE.OrbitControls( camera );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// Grid
 
@@ -81,7 +82,6 @@
 				}
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/css3d_sandbox.html

@@ -55,6 +55,8 @@
 				controls = new THREE.TrackballControls( camera );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+
 				scene2 = new THREE.Scene();
 
 				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
@@ -92,7 +94,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/misc_animation_keys.html

@@ -111,7 +111,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0x000000, 0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/misc_controls_orbit.html

@@ -59,10 +59,10 @@
 			function init() {
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcccccc );
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/misc_controls_pointerlock.html

@@ -166,6 +166,7 @@
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
 
 				var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
@@ -300,7 +301,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/misc_controls_trackball.html

@@ -82,10 +82,11 @@
 				// world
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcccccc );
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
 				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
-				var material = new THREE.MeshPhongMaterial( { color:0xffffff, flatShading: true } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
@@ -117,7 +118,6 @@
 				// renderer
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/misc_lights_test.html

@@ -67,6 +67,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				// Spheres
 
@@ -114,13 +115,11 @@
 				pointLight.add( mesh );
 
 				canvasRenderer = new THREE.CanvasRenderer();
-				canvasRenderer.setClearColor( 0xffffff );
 				canvasRenderer.setPixelRatio( window.devicePixelRatio );
 				canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( canvasRenderer.domElement );
 
 				webglRenderer = new THREE.WebGLRenderer();
-				webglRenderer.setClearColor( 0xffffff );
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				webglRenderer.domElement.style.position = "relative";

examples/misc_lookat.html

@@ -63,6 +63,7 @@
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
 				scene.add( sphere );
@@ -86,7 +87,6 @@
 				scene.matrixAutoUpdate = false;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/misc_ubiquity_test.html

@@ -49,6 +49,7 @@
 
 				scene = new THREE.Scene();
 				scene.autoUpdate = false;
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// QRCODE
 
@@ -186,24 +187,20 @@
 				scene.add( directional );
 
 				canvasRenderer = new THREE.CanvasRenderer();
-				canvasRenderer.setClearColor( 0xf0f0f0 );
 				canvasRenderer.setPixelRatio( window.devicePixelRatio );
 				canvasRenderer.setSize( width, height );
 				document.body.appendChild( canvasRenderer.domElement );
 
 				svgRenderer = new THREE.SVGRenderer();
-				svgRenderer.setClearColor( 0xf0f0f0 );
 				svgRenderer.setSize( width, height );
 				svgRenderer.setQuality( 'low' );
 				document.body.appendChild( svgRenderer.domElement );
 
 				softwareRenderer = new THREE.SoftwareRenderer();
-				softwareRenderer.setClearColor( 0xf0f0f0 );
 				softwareRenderer.setSize( width, height );
 				document.body.appendChild( softwareRenderer.domElement );
 
 				webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
-				webglRenderer.setClearColor( 0xf0f0f0 );
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 				webglRenderer.setSize( width, height );
 				document.body.appendChild( webglRenderer.domElement );

examples/misc_ubiquity_test2.html

@@ -46,6 +46,7 @@
 				camera.position.z = 2000;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var textureLoader = new THREE.TextureLoader();
 
@@ -148,14 +149,12 @@
 				//
 
 				canvasRenderer = new THREE.CanvasRenderer();
-				canvasRenderer.setClearColor( 0xf0f0f0 );
 				canvasRenderer.setPixelRatio( window.devicePixelRatio );
 				canvasRenderer.setSize( width, height );
 				var container1 = document.getElementById( 'container1' );
 				container1.appendChild( canvasRenderer.domElement );
 
 				webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
-				webglRenderer.setClearColor( 0xf0f0f0 );
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 				webglRenderer.setSize( width, height );
 				var container2 = document.getElementById( 'container2' );

examples/raytracing_sandbox.html

@@ -37,6 +37,7 @@
 				camera.position.z = 600;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// materials
 
@@ -256,7 +257,6 @@
 					randomize: true,
 					blockSize: 64
 				} );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.domElement.style.position = "absolute";

examples/software_geometry_earth.html

@@ -111,7 +111,6 @@
 				group.add( mesh );
 
 				renderer = new THREE.SoftwareRenderer();
-				renderer.setClearColor( 0x000000 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

examples/software_sandbox.html

@@ -126,7 +126,6 @@
 				scene.add( line );
 
 				renderer = new THREE.SoftwareRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

examples/svg_sandbox.html

@@ -42,6 +42,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// QRCODE
 
@@ -177,7 +178,6 @@
 				scene.add( directional );
 
 				renderer = new THREE.SVGRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setQuality( 'low' );
 				document.body.appendChild( renderer.domElement );

examples/webgl_animation_cloth.html

@@ -128,6 +128,7 @@
 				// scene
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcce0ff );
 				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
 
 				// camera
@@ -271,7 +272,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( scene.fog.color );
 				renderer.shadowMap.renderSingleSided = false;
 
 				container.appendChild( renderer.domElement );

examples/webgl_animation_keyframes_json.html

@@ -50,7 +50,6 @@
 			container.appendChild( stats.dom );
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setClearColor( 0x000000, 1 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_animation_scene.html

@@ -60,7 +60,6 @@
 			container.appendChild( stats.dom );
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setClearColor( 0xffffff );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 			container.appendChild( renderer.domElement );
@@ -71,6 +70,7 @@
 			new THREE.ObjectLoader().load( url, function ( loadedScene ) {
 
 				scene = loadedScene;
+				scene.background = new THREE.Color( 0xffffff );
 
 				// If the loaded file contains a perspective camera, use it with adjusted aspect ratio...
 

examples/webgl_animation_skinning_blending.html

@@ -86,10 +86,10 @@
 			// Initialize scene, light and renderer
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x333333 );
 			scene.add( new THREE.AmbientLight( 0xffffff ) );
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setClearColor( 0x333333 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_animation_skinning_morph.html

@@ -88,7 +88,7 @@
 				camera.position.z = 2200;
 
 				scene = new THREE.Scene();
-
+				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
 
 				scene.add( camera );
@@ -131,7 +131,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";

examples/webgl_buffergeometry.html

@@ -61,6 +61,7 @@
 				camera.position.z = 2750;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
@@ -198,7 +199,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_instancing.html

@@ -124,6 +124,7 @@
 			camera.position.z = 2;
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x101010 );
 
 			// geometry
 
@@ -217,7 +218,6 @@
 				return;
 			}
 
-			renderer.setClearColor( 0x101010 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing2.html

@@ -120,6 +120,7 @@
 			controls = new THREE.TrackballControls( camera );
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x101010 );
 
 			//
 
@@ -201,7 +202,6 @@
 				return;
 			}
 
-			renderer.setClearColor( 0x101010 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing_dynamic.html

@@ -112,8 +112,10 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 			//camera.position.z = 20;
 
-			renderer = new THREE.WebGLRenderer();
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x101010 );
+
+			renderer = new THREE.WebGLRenderer();
 
 			// geometry
 
@@ -265,7 +267,6 @@
 				return;
 			}
 
-			renderer.setClearColor( 0x101010 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing_interleaved_dynamic.html

@@ -112,8 +112,10 @@
 		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 		//camera.position.z = 20;
 
-		renderer = new THREE.WebGLRenderer();
 		scene = new THREE.Scene();
+		scene.background = new THREE.Color( 0x101010 );
+
+		renderer = new THREE.WebGLRenderer();
 
 		// geometry
 
@@ -236,7 +238,6 @@
 			return;
 		}
 
-		renderer.setClearColor( 0x101010 );
 		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( window.innerWidth, window.innerHeight );
 		container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_points.html

@@ -60,6 +60,7 @@
 				camera.position.z = 2750;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
@@ -116,7 +117,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_points_interleaved.html

@@ -58,6 +58,7 @@
 				camera.position.z = 2750;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
@@ -119,7 +120,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_rawshader.html

@@ -105,6 +105,7 @@
 				camera.position.z = 2;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x101010 );
 
 				// geometry
 
@@ -155,7 +156,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0x101010 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_selective_draw.html

@@ -92,13 +92,9 @@
 
 		function init() {
 
-			renderer = new THREE.WebGLRenderer( {
-				antialias: true
-			} );
-			renderer.setClearColor( 0x000000, 0.0 );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-
 			document.body.appendChild( renderer.domElement );
 
 			scene = new THREE.Scene();

examples/webgl_buffergeometry_uint.html

@@ -61,6 +61,7 @@
 				camera.position.z = 2750;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
@@ -205,7 +206,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_camera_cinematic.html

@@ -53,8 +53,9 @@
 				camera.setLens(5);
         		camera.position.set(2, 1, 500);
 
-
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 0.35 );
@@ -78,8 +79,7 @@
 
 				raycaster = new THREE.Raycaster();
 
-				renderer = new THREE.WebGLRenderer({antialias:true});
-				renderer.setClearColor( 0xf0f0f0 );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/webgl_custom_attributes.html

@@ -101,6 +101,7 @@
 			camera.position.z = 300;
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x050505 );
 
 			uniforms = {
 
@@ -140,7 +141,6 @@
 			scene.add( sphere );
 
 			renderer = new THREE.WebGLRenderer();
-			renderer.setClearColor( 0x050505 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_custom_attributes_lines.html

@@ -95,6 +95,7 @@
 			camera.position.z = 400;
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x050505 );
 
 			uniforms = {
 
@@ -162,7 +163,6 @@
 			scene.add( object );
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setClearColor( 0x050505 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_colors.html

@@ -65,6 +65,7 @@
 				camera.position.z = 1800;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
@@ -172,7 +173,6 @@
 				scene.add( group3 );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_colors_lookuptable.html

@@ -68,6 +68,7 @@
 
 				// SCENE
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				// CAMERA
 				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -101,7 +102,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize(  window.innerWidth,  window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_dynamic.html

@@ -83,6 +83,7 @@
 				controls.lookSpeed = 0.1;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xaaccff );
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
 
 				geometry = new THREE.PlaneGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
@@ -104,7 +105,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xaaccff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_extrude_shapes.html

@@ -44,12 +44,12 @@
 				document.body.appendChild( info );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0x222222 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x222222 );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 500 );

examples/webgl_geometry_extrude_shapes2.html

@@ -344,12 +344,12 @@
 
 				/// Global : renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xb0b0b0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				/// Global : scene
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xb0b0b0 );
 
 				/// Global : camera
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );

examples/webgl_geometry_extrude_splines.html

@@ -172,6 +172,7 @@
 			// scene
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xf0f0f0 );
 
 			// light
 
@@ -203,7 +204,6 @@
 			// renderer
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setClearColor( 0xf0f0f0 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_geometry_hierarchy.html

@@ -46,6 +46,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
 
 				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
@@ -73,7 +74,6 @@
 				scene.add( group );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_hierarchy2.html

@@ -46,6 +46,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 				var material = new THREE.MeshNormalMaterial();
@@ -127,7 +128,6 @@
 				}
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_minecraft.html

@@ -87,6 +87,7 @@
 				controls.lookVertical = true;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xbfd1e5 );
 
 				// sides
 
@@ -196,7 +197,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xbfd1e5 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_minecraft_ao.html

@@ -93,6 +93,7 @@
 				controls.verticalMax = 2.2;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 );
 
 				// sides
@@ -289,7 +290,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_nurbs.html

@@ -67,6 +67,8 @@
 				camera.position.set( 0, 150, 750 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+				
 				scene.add( new THREE.AmbientLight( 0x808080 ) );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1 );
@@ -170,7 +172,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_shapes.html

@@ -51,6 +51,7 @@
 				container.appendChild( info );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 150, 500 );
@@ -364,7 +365,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_spline_editor.html

@@ -85,6 +85,8 @@
 				container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 250, 1000 );
 				scene.add( camera );
@@ -120,7 +122,6 @@
 				scene.add( axis );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;

examples/webgl_geometry_teapot.html

@@ -99,7 +99,6 @@
 
 				// RENDERER
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xAAAAAA );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( canvasWidth, canvasHeight );
 				renderer.gammaInput = true;
@@ -147,6 +146,7 @@
 
 				// scene itself
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xAAAAAA );
 
 				scene.add( ambientLight );
 				scene.add( light );

examples/webgl_geometry_terrain.html

@@ -72,6 +72,7 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xbfd1e5 );
 
 				controls = new THREE.FirstPersonControls( camera );
 				controls.movementSpeed = 1000;
@@ -100,7 +101,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xbfd1e5 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_terrain_fog.html

@@ -77,6 +77,7 @@
 				controls.lookSpeed = 0.1;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xefd1b5 );
 				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
 				var data = generateHeight( worldWidth, worldDepth );
@@ -102,7 +103,6 @@
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xefd1b5 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_terrain_raycast.html

@@ -77,6 +77,7 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xbfd1e5 );
 
 				controls = new THREE.OrbitControls(camera);
 				controls.target.set( 0.0, 100.0, 0.0 );
@@ -115,7 +116,6 @@
 				scene.add( helper );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xbfd1e5 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_geometry_text.html

@@ -138,6 +138,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000000 );
 				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
 
 				// LIGHTS
@@ -204,7 +205,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_text_earcut.html

@@ -196,6 +196,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000000 );
 				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
 
 				// LIGHTS
@@ -262,7 +263,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_text_pnltri.html

@@ -168,6 +168,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000000 );
 				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
 
 				// LIGHTS
@@ -234,7 +235,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_text_shapes.html

@@ -43,6 +43,7 @@
 				controls.target.set( 0, 0, 0 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
@@ -128,7 +129,6 @@
 				} ); //end load function
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_gpgpu_birds.html

@@ -463,11 +463,10 @@
 				camera.position.z = 350;
 
 				scene = new THREE.Scene();
-
+				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 100, 1000 );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_gpgpu_protoplanet.html

@@ -335,7 +335,6 @@
 				scene = new THREE.Scene();
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0x000000 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_gpgpu_water.html

@@ -270,7 +270,6 @@
 				scene.add( sun2 );
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0x000000 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_interactive_buffergeometry.html

@@ -64,6 +64,7 @@
 				camera.position.z = 2750;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
@@ -213,7 +214,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_interactive_cubes.html

@@ -46,6 +46,7 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 ).normalize();
@@ -76,7 +77,6 @@
 				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/webgl_interactive_cubes_gpu.html

@@ -72,6 +72,7 @@
 				controls.dynamicDampingFactor = 0.3;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				pickingScene = new THREE.Scene();
 				pickingTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
@@ -164,7 +165,6 @@
 				scene.add( highlightBox );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_interactive_cubes_ortho.html

@@ -48,6 +48,7 @@
 				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 ).normalize();
@@ -78,7 +79,6 @@
 				raycaster = new THREE.Raycaster();
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/webgl_interactive_draggablecubes.html

@@ -49,6 +49,7 @@
 				controls.dynamicDampingFactor = 0.3;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
@@ -92,7 +93,6 @@
 				}
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_interactive_instances_gpu.html

@@ -452,6 +452,8 @@
 			} );
 
 			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xffffff );
+
 			scene.add( camera );
 			scene.add( highlightBox );
 
@@ -956,7 +958,6 @@
 				return;
 
 			}
-			renderer.setClearColor( 0xffffff );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			//renderer.sortObjects = false;

examples/webgl_interactive_lines.html

@@ -48,6 +48,7 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				var geometry = new THREE.SphereGeometry( 5 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
@@ -123,7 +124,6 @@
 				raycaster.linePrecision = 3;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);

examples/webgl_interactive_voxelpainter.html

@@ -56,6 +56,7 @@
 				camera.lookAt( new THREE.Vector3() );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// roll-over helpers
 
@@ -97,7 +98,6 @@
 				scene.add( directionalLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_lensflares.html

@@ -79,8 +79,8 @@
 				// scene
 
 				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x000000, 3500, 15000 );
-				scene.fog.color.setHSL( 0.51, 0.4, 0.01 );
+				scene.background = new THREE.Color().setHSL( 0.51, 0.4, 0.01 );
+				scene.fog = new THREE.Fog( scene.background, 3500, 15000 );
 
 				// world
 
@@ -160,7 +160,6 @@
 				// renderer
 
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_lights_hemisphere.html

@@ -104,9 +104,8 @@
 				camera.position.set( 0, 0, 250 );
 
 				scene = new THREE.Scene();
-
-				scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
-				scene.fog.color.setHSL( 0.6, 0, 1 );
+				scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
+				scene.fog = new THREE.Fog( scene.background, 1, 5000 );
 
 				// LIGHTS
 
@@ -117,7 +116,7 @@
 				scene.add( hemiLight );
 
 				hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
-        scene.add( hemiLightHelper );
+				scene.add( hemiLightHelper );
 
 				//
 
@@ -206,7 +205,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_lights_pointlights2.html

@@ -72,6 +72,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x040306 );
 				scene.fog = new THREE.Fog( 0x040306, 10, 300 );
 
 				// CONTROLS
@@ -175,7 +176,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_lines_dashed.html

@@ -58,7 +58,7 @@
 				camera.position.z = 150;
 
 				scene = new THREE.Scene();
-
+				scene.background = new THREE.Color( 0x111111 );
 				scene.fog = new THREE.Fog( 0x111111, 150, 200 );
 
 				root = new THREE.Object3D();
@@ -96,7 +96,6 @@
 				scene.add( object );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0x111111 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 

examples/webgl_loader_3mf.html

@@ -63,12 +63,12 @@
 			function init() {
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0x333333 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x333333 );
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
 

examples/webgl_loader_amf.html

@@ -61,6 +61,8 @@
 			function init() {
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x999999 );
+
 				scene.add( new THREE.AmbientLight( 0x999999 ) );
 
 				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
@@ -79,7 +81,6 @@
 				scene.add( grid );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0x999999 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_loader_bvh.html

@@ -73,12 +73,12 @@
 				controls.maxDistance = 700;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xeeeeee );
 
 				scene.add( new THREE.GridHelper( 400, 10 ) );
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xeeeeee );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_loader_ctm.html

@@ -80,6 +80,7 @@
 				camera.position.z = 800;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 800, 2000 );
 
 				var path = "textures/cube/SwedishRoyalCastle/";
@@ -111,7 +112,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";

examples/webgl_loader_fbx.html

@@ -120,7 +120,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( 0x000000 );
 				container.appendChild( renderer.domElement );
 
 				// controls, camera

examples/webgl_loader_gltf2.html

@@ -127,6 +127,7 @@
 				container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x222222 );
 
 				defaultCamera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
 
@@ -168,8 +169,7 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer({antialias:true});
-				renderer.setClearColor( 0x222222 );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_loader_json_objconverter.html

@@ -84,6 +84,7 @@
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				// GROUND
 
@@ -152,7 +153,6 @@
 					try {
 
 						webglRenderer = new THREE.WebGLRenderer();
-						webglRenderer.setClearColor( 0xffffff );
 						webglRenderer.setPixelRatio( window.devicePixelRatio );
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 						webglRenderer.domElement.style.position = "relative";
@@ -170,7 +170,6 @@
 				if ( render_canvas ) {
 
 					canvasRenderer = new THREE.CanvasRenderer();
-					canvasRenderer.setClearColor( 0xffffff );
 					canvasRenderer.setPixelRatio( window.devicePixelRatio );
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 					container.appendChild( canvasRenderer.domElement );

examples/webgl_loader_md2.html

@@ -86,6 +86,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 				scene.fog = new THREE.Fog( 0x050505, 400, 1000 );
 
 				// LIGHTS
@@ -133,7 +134,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_md2_control.html

@@ -89,6 +89,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 1000, 4000 );
 
 				scene.add( camera );
@@ -136,7 +137,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_mmd.html

@@ -78,6 +78,7 @@
 				// scene
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				var gridHelper = new THREE.PolarGridHelper( 30, 10 );
 				gridHelper.position.y = -10;
@@ -95,7 +96,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( new THREE.Color( 0xffffff ) );
 				container.appendChild( renderer.domElement );
 
 				effect = new THREE.OutlineEffect( renderer );

examples/webgl_loader_mmd_audio.html

@@ -78,6 +78,7 @@
 				// scene
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				scene.add( new THREE.PolarGridHelper( 30, 10 ) );
 
@@ -93,7 +94,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( new THREE.Color( 0xffffff ) );
 				container.appendChild( renderer.domElement );
 
 				effect = new THREE.OutlineEffect( renderer );

examples/webgl_loader_mmd_pose.html

@@ -73,6 +73,7 @@
 				// scene
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
 				var ambient = new THREE.AmbientLight( 0x666666 );
 				scene.add( ambient );
@@ -86,7 +87,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( new THREE.Color( 0xffffff ) );
 				container.appendChild( renderer.domElement );
 
 				effect = new THREE.OutlineEffect( renderer );