Removed custom skybox from examples.

examples/misc_controls_fly.html

@@ -73,7 +73,7 @@
 			var SCREEN_WIDTH  = window.innerWidth;
 
 			var container, stats;
-			var camera, controls, scene, sceneCube, renderer;
+			var camera, controls, scene, renderer;
 			var geometry, meshPlanet, meshClouds, meshMoon;
 			var dirLight, pointLight, ambientLight;
 
@@ -217,8 +217,6 @@
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.sortObjects = false;
 
-				renderer.autoClear = false;
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -292,7 +290,6 @@
 				controls.movementSpeed = 0.33 * d;
 				controls.update( delta );
 
-				renderer.clear();
 				composer.render( delta );
 
 			}

examples/webgl_effects_anaglyph.html

@@ -74,10 +74,6 @@
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
-				scene = new THREE.Scene();
-
-				var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
-
 				var path = "textures/cube/pisa/";
 				var format = '.png';
 				var urls = [
@@ -87,6 +83,11 @@
 				];
 
 				var textureCube = new THREE.CubeTextureLoader().load( urls );
+
+				scene = new THREE.Scene();
+				scene.background = textureCube;
+
+				var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
 				for ( var i = 0; i < 500; i ++ ) {
@@ -105,23 +106,6 @@
 
 				}
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
-				scene.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );

examples/webgl_effects_parallaxbarrier.html

@@ -163,7 +163,12 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
+				var textureCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/Bridge2/')
+					.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
+
 				scene = new THREE.Scene();
+				scene.background = textureCube;
 
 				// LIGHTS
 
@@ -182,23 +187,6 @@
 				pointLight.position.set( 2000, 1200, 10000 );
 				scene.add( pointLight );
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100000, 100000, 100000 ), material );
-				scene.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
@@ -221,15 +209,6 @@
 
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-				var r = "textures/cube/Bridge2/";
-				var urls = [
-					r + "posx.jpg", r + "negx.jpg",
-					r + "posy.jpg", r + "negy.jpg",
-					r + "posz.jpg", r + "negz.jpg"
-				];
-
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-
 				// common materials
 
 				var mlib = {

examples/webgl_effects_stereo.html

@@ -75,18 +75,15 @@
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/Park3Med/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
 				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
-				var path = "textures/cube/skybox/";
-				var format = '.jpg';
-				var urls = [
-					path + 'px' + format, path + 'nx' + format,
-					path + 'py' + format, path + 'ny' + format,
-					path + 'pz' + format, path + 'nz' + format
-				];
-
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				var textureCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/Park3Med/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				textureCube.mapping = THREE.CubeRefractionMapping;
 
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
@@ -104,23 +101,6 @@
 
 				}
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100000, 100000, 100000 ), material );
-				scene.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_geometry_teapot.html

@@ -54,7 +54,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var camera, scene, sceneCube, renderer;
+			var camera, scene, renderer;
 			var cameraControls;
 			var effectController;
 			var teapotSize = 400;
@@ -70,7 +70,7 @@
 			var shading;
 			var wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
 
-			var teapot;
+			var teapot, textureCube;
 
 			// allocate these just once
 			var diffuseColor = new THREE.Color();
@@ -127,7 +127,7 @@
 					path + "pz.jpg", path + "nz.jpg"
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube = new THREE.CubeTextureLoader().load( urls );
 
 				// MATERIALS
 				var materialColor = new THREE.Color();
@@ -145,26 +145,6 @@
 
 				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, shading: THREE.SmoothShading, side: THREE.DoubleSide } );
 
-				// SKYBOX
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var skyboxMaterial = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} );
-
-				skybox = new THREE.Mesh( new THREE.BoxGeometry( 5000, 5000, 5000 ), skyboxMaterial );
-
-				// skybox scene - keep camera centered here
-				sceneCube = new THREE.Scene();
-				sceneCube.add( skybox );
-
 				// scene itself
 				scene = new THREE.Scene();
 
@@ -339,20 +319,13 @@
 				light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
 
 				// skybox is rendered separately, so that it is always behind the teapot.
-				if ( shading === "reflective" )
-				{
+				if ( shading === "reflective" ) {
 
-					// clear to skybox
-					renderer.autoClear = false;
-					skybox.position.copy( camera.position );
-					renderer.render( sceneCube, camera );
+					scene.background = textureCube;
 
-				}
-				else
-				{
+				} else {
 
-					// clear to regular background color
-					renderer.autoClear = true;
+					scene.background = null;
 
 				}
 

examples/webgl_loader_ctm_materials.html

@@ -33,7 +33,7 @@
 
 	<body>
 		<div id="info">
-		<a href="http://threejs.org" target="_blank">three.js</a> webgl - baked + real-time illumination -
+		<a href="http://threejs.org" target="_blank">three.js</a> webgl -
 		using <a href="http://code.google.com/p/js-openctm/">js-openctm</a> -
 		camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a> -
 		skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a>
@@ -66,7 +66,6 @@
 			var mesh;
 
 			var textureCube;
-			var cameraCube, sceneCube;
 
 			var loader;
 
@@ -95,14 +94,6 @@
 
 				// SCENE
 
-				scene = new THREE.Scene();
-
-				// SKYBOX
-
-				sceneCube = new THREE.Scene();
-				cameraCube = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
-				sceneCube.add( cameraCube );
-
 				var r = "textures/cube/pisa/";
 				var urls = [
 					r + "px.png", r + "nx.png",
@@ -112,21 +103,8 @@
 
 				textureCube = new THREE.CubeTextureLoader().load( urls );
 
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
-				sceneCube.add( mesh );
+				scene = new THREE.Scene();
+				scene.background = textureCube;
 
 				// LIGHTS
 
@@ -149,8 +127,6 @@
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
 
-				renderer.autoClear = false;
-
 				container.appendChild( renderer.domElement );
 
 				//
@@ -294,9 +270,6 @@
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
-				cameraCube.updateProjectionMatrix();
-
 			}
 
 
@@ -322,10 +295,6 @@
 
 				controls.update();
 
-				cameraCube.rotation.copy( camera.rotation );
-
-				renderer.clear();
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_cars.html

@@ -140,7 +140,6 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
 
 			var m, mi;
 
@@ -164,12 +163,15 @@
 				// CAMERAS
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				// SCENE
 
+				var textureCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/Bridge2/')
+					.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
+
 				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
+				scene.background = textureCube;
 
 				// LIGHTS
 
@@ -188,31 +190,12 @@
 				pointLight.position.set( 2000, 1200, 10000 );
 				scene.add( pointLight );
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
-				sceneCube.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setFaceCulling( THREE.CullFaceNone );
-				renderer.autoClear = false;
 
 				container.appendChild( renderer.domElement );
 
@@ -225,16 +208,6 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				var r = "textures/cube/Bridge2/";
-				var urls = [
-					r + "posx.jpg", r + "negx.jpg",
-					r + "posy.jpg", r + "negy.jpg",
-					r + "posz.jpg", r + "negz.jpg"
-				];
-
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.format = THREE.RGBFormat;
-
 				// common materials
 
 				var mlib = {
@@ -479,9 +452,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -626,9 +596,7 @@
 				camera.position.z = 1000 * Math.sin( timer );
 
 				camera.lookAt( scene.position );
-				cameraCube.rotation.copy( camera.rotation );
 
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 				if ( STATS_ENABLED ) stats.update();

examples/webgl_materials_cubemap.html

@@ -49,7 +49,6 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
 
 			var mesh, geometry;
 
@@ -76,10 +75,21 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 2000;
 
-				cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
+				//
+
+				var path = "textures/cube/SwedishRoyalCastle/";
+				var format = '.jpg';
+				var urls = [
+						path + 'px' + format, path + 'nx' + format,
+						path + 'py' + format, path + 'ny' + format,
+						path + 'pz' + format, path + 'nz' + format
+					];
+
+				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
+				reflectionCube.format = THREE.RGBFormat;
 
 				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
+				scene.background = reflectionCube;
 
 				// LIGHTS
 
@@ -97,17 +107,6 @@
 				mesh.scale.set( 0.05, 0.05, 0.05 );
 				pointLight.add( mesh );
 
-				var path = "textures/cube/SwedishRoyalCastle/";
-				var format = '.jpg';
-				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
-
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
-				reflectionCube.format = THREE.RGBFormat;
-
 				var refractionCube = new THREE.CubeTextureLoader().load( urls );
 				refractionCube.mapping = THREE.CubeRefractionMapping;
 				refractionCube.format = THREE.RGBFormat;
@@ -117,30 +116,11 @@
 				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
 				var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = reflectionCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
-				sceneCube.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -167,9 +147,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -226,9 +203,7 @@
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
-				cameraCube.rotation.copy( camera.rotation );
 
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_cubemap_balls_reflection.html

@@ -46,7 +46,6 @@
 			var container;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
 
 			var mesh, lightMesh, geometry;
 			var spheres = [];
@@ -72,23 +71,13 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
-				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-
 				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
+				scene.background = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/pisa/' )
+					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
 
 				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
-
-				var path = "textures/cube/pisa/";
-				var format = '.png';
-				var urls = [
-					path + 'px' + format, path + 'nx' + format,
-					path + 'py' + format, path + 'ny' + format,
-					path + 'pz' + format, path + 'nz' + format
-				];
-
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
@@ -106,30 +95,11 @@
 
 				}
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
-				sceneCube.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -146,9 +116,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -187,9 +154,7 @@
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
-				cameraCube.rotation.copy( camera.rotation );
 
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_cubemap_balls_refraction.html

@@ -46,7 +46,6 @@
 			var container;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
 
 			var mesh, lightMesh, geometry;
 			var spheres = [];
@@ -71,22 +70,16 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
-				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-
 				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
+				scene.background = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/Park3Med/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
 				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
-				var path = "textures/cube/skybox/";
-				var format = '.jpg';
-				var urls = [
-					path + 'px' + format, path + 'nx' + format,
-					path + 'py' + format, path + 'ny' + format,
-					path + 'pz' + format, path + 'nz' + format
-				];
-
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				var textureCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/Park3Med/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				textureCube.mapping = THREE.CubeRefractionMapping;
 
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
@@ -107,30 +100,11 @@
 
 				}
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
-				sceneCube.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -147,9 +121,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -188,9 +159,7 @@
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
-				cameraCube.rotation.copy( camera.rotation );
 
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_cubemap_refraction.html

@@ -50,7 +50,6 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube, cubeTarget;
 
 			var mesh, zmesh, geometry;
 
@@ -74,10 +73,21 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 2000;
 
-				cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
+				//
+
+				var r = "textures/cube/Park3Med/";
+
+				var urls = [
+					r + "px.jpg", r + "nx.jpg",
+					r + "py.jpg", r + "ny.jpg",
+					r + "pz.jpg", r + "nz.jpg"
+				];
+
+				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube.mapping = THREE.CubeRefractionMapping;
 
 				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
+				scene.background = textureCube;
 
 				// LIGHTS
 
@@ -97,44 +107,15 @@
 
 				// material samples
 
-				var r = "textures/cube/Park3Med/";
-
-				var urls = [
-					r + "px.jpg", r + "nx.jpg",
-					r + "py.jpg", r + "ny.jpg",
-					r + "pz.jpg", r + "nz.jpg"
-				];
-
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.mapping = THREE.CubeRefractionMapping;
-
 				var cubeMaterial3 = new THREE.MeshBasicMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity:0.9 } );
 				var cubeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985 } );
 				var cubeMaterial1 = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } );
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100000, 100000, 100000 ), material );
-				sceneCube.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -159,9 +140,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -216,13 +194,9 @@
 
 				camera.lookAt( scene.position );
 
-				cameraCube.rotation.copy( camera.rotation );
-
 				pointLight.position.x = 1500 * Math.cos( timer );
 				pointLight.position.z = 1500 * Math.sin( timer );
 
-				renderer.clear();
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_shaders_fresnel.html

@@ -47,7 +47,6 @@
 			var container;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
 
 			var mesh, zmesh, lightMesh, geometry;
 			var spheres = [];
@@ -72,13 +71,7 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
-				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-
-				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
-
-
-				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+				//
 
 				var path = "textures/cube/Park2/";
 				var format = '.jpg';
@@ -88,17 +81,26 @@
 						path + 'posz' + format, path + 'negz' + format
 					];
 
-
 				var textureCube = new THREE.CubeTextureLoader().load( urls );
 				textureCube.format = THREE.RGBFormat;
 
+				scene = new THREE.Scene();
+				scene.background = textureCube;
+
+				//
+
+				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+
 				var shader = THREE.FresnelShader;
 				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "tCube" ].value = textureCube;
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms };
-				var material = new THREE.ShaderMaterial( parameters );
+				var material = new THREE.ShaderMaterial( {
+					uniforms: uniforms,
+					vertexShader: shader.vertexShader,
+					fragmentShader: shader.fragmentShader
+				} );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
@@ -118,29 +120,11 @@
 
 				scene.matrixAutoUpdate = false;
 
-				// Skybox
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var material = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100000, 100000, 100000 ), material );
-				sceneCube.add( mesh );
-
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -157,9 +141,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -190,8 +171,6 @@
 
 				camera.lookAt( scene.position );
 
-				cameraCube.rotation.copy( camera.rotation );
-
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
 					var sphere = spheres[ i ];
@@ -201,8 +180,6 @@
 
 				}
 
-				renderer.clear();
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_standard.html

@@ -65,7 +65,6 @@
 			var container, stats, loader;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube;
 
 			var controls;
 
@@ -96,49 +95,21 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				renderer.autoClear = false;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = 3;
 
+				var textureCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/pisa/' )
+					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
 
 				scene = new THREE.Scene();
-
-				sceneCube = new THREE.Scene();
-				cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
-				sceneCube.add( cameraCube );
+				scene.background = textureCube;
 
 				// LIGHTS
 
 				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );
-				// scene.add( new THREE.AmbientLight( 0xffffff ) );
-
-				//
-
-				var loader = new THREE.CubeTextureLoader();
-				loader.setPath( 'textures/cube/pisa/' );
-				var textureCube = loader.load( [
-					"px.png", "nx.png",
-					"py.png", "ny.png",
-					"pz.png", "nz.png"
-				] );
-
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].value = textureCube;
-
-				var materialBG = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms,
-					depthWrite: false,
-					side: THREE.BackSide
-
-				} ),
-
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), materialBG );
-				sceneCube.add( mesh );
 
 				//
 
@@ -189,7 +160,7 @@
 					];
 				};
 
-				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
+				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
 
 					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
@@ -240,9 +211,6 @@
 
 				controls.update();
 
-				cameraCube.quaternion.copy( camera.quaternion );
-
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 				if ( statsEnabled ) stats.update();

examples/webgl_materials_variations_basic.html

@@ -59,7 +59,15 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
+				//
+
+				var reflectionCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/SwedishRoyalCastle/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				reflectionCube.format = THREE.RGBFormat;
+
 				scene = new THREE.Scene();
+				scene.background = reflectionCube;
 
 				// Materials
 
@@ -72,16 +80,6 @@
 
 				var materials = [];
 
-				var loader = new THREE.CubeTextureLoader();
-				loader.setPath( 'textures/cube/SwedishRoyalCastle/' );
-
-				var reflectionCube = loader.load( [
-					'px.jpg', 'nx.jpg',
-					'py.jpg', 'ny.jpg',
-					'pz.jpg', 'nz.jpg'
-				] );
-				reflectionCube.format = THREE.RGBFormat;
-
 				var cubeWidth = 400;
 				var numberOfSphersPerSide = 5;
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;

examples/webgl_materials_variations_lambert.html

@@ -59,7 +59,15 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
+				//
+
+				var reflectionCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/SwedishRoyalCastle/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				reflectionCube.format = THREE.RGBFormat;
+
 				scene = new THREE.Scene();
+				scene.background = reflectionCube;
 
 				// Materials
 
@@ -72,16 +80,6 @@
 
 				var materials = [];
 
-				var loader = new THREE.CubeTextureLoader();
-				loader.setPath( 'textures/cube/SwedishRoyalCastle/' );
-
-				var reflectionCube = loader.load( [
-					'px.jpg', 'nx.jpg',
-					'py.jpg', 'ny.jpg',
-					'pz.jpg', 'nz.jpg'
-				] );
-				reflectionCube.format = THREE.RGBFormat;
-
 				var cubeWidth = 400;
 				var numberOfSphersPerSide = 5;
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;

examples/webgl_materials_variations_phong.html

@@ -60,7 +60,15 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
+				//
+
+				var reflectionCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/SwedishRoyalCastle/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				reflectionCube.format = THREE.RGBFormat;
+
 				scene = new THREE.Scene();
+				scene.background = reflectionCube;
 
 				// Materials
 
@@ -73,17 +81,6 @@
 
 				var materials = [];
 
-				var path = "textures/cube/SwedishRoyalCastle/";
-				var format = '.jpg';
-				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
-
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
-				reflectionCube.format = THREE.RGBFormat;
-
 				var cubeWidth = 400;
 				var numberOfSphersPerSide = 5;
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;

examples/webgl_materials_variations_physical.html

@@ -59,19 +59,17 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
-				scene = new THREE.Scene();
+				//
 
-				// Materials
+				var reflectionCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/SwedishRoyalCastle/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				reflectionCube.format = THREE.RGBFormat;
 
-				var loader = new THREE.CubeTextureLoader();
-				loader.setPath( 'textures/cube/SwedishRoyalCastle/' );
+				scene = new THREE.Scene();
+				scene.background = reflectionCube;
 
-				var reflectionCube = loader.load( [
-					'px.jpg', 'nx.jpg',
-					'py.jpg', 'ny.jpg',
-					'pz.jpg', 'nz.jpg'
-				] );
-				reflectionCube.format = THREE.RGBFormat;
+				// Materials
 
 				var cubeWidth = 400;
 				var numberOfSphersPerSide = 5;

examples/webgl_materials_variations_standard.html

@@ -59,7 +59,15 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
+				//
+
+				var reflectionCube = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/SwedishRoyalCastle/' )
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				reflectionCube.format = THREE.RGBFormat;
+
 				scene = new THREE.Scene();
+				scene.background = reflectionCube;
 
 				// Materials
 
@@ -72,16 +80,6 @@
 
 				var materials = [];
 
-				var loader = new THREE.CubeTextureLoader();
-				loader.setPath( 'textures/cube/SwedishRoyalCastle/' );
-
-				var reflectionCube = loader.load( [
-					'px.jpg', 'nx.jpg',
-					'py.jpg', 'ny.jpg',
-					'pz.jpg', 'nz.jpg'
-				] );
-				reflectionCube.format = THREE.RGBFormat;
-
 				var cubeWidth = 400;
 				var numberOfSphersPerSide = 5;
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;

examples/webgl_postprocessing_dof2.html

@@ -91,6 +91,7 @@ Use WEBGL Depth buffer support?
 				camera.position.z = 450;
 
 				scene = new THREE.Scene();
+				scene.add( camera );
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -102,9 +103,6 @@ Use WEBGL Depth buffer support?
 
 				//
 
-				object = new THREE.Object3D();
-				scene.add( object );
-
 				var r = "textures/cube/Bridge2/";
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 							 r + "posy.jpg", r + "negy.jpg",
@@ -129,7 +127,7 @@ Use WEBGL Depth buffer support?
 				} );
 
 				mesh = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), material );
-				scene.add( mesh );
+				camera.add( mesh );
 
 
 				// Focusing Floor
@@ -201,7 +199,7 @@ Use WEBGL Depth buffer support?
 						mesh.rotation.x = Math.PI / 2;
 						mesh.rotation.z = -i / monkeys * Math.PI * 2;
 
-						object.add( mesh );
+						scene.add( mesh );
 
 					}
 
@@ -222,14 +220,11 @@ Use WEBGL Depth buffer support?
 
 					var mesh = new THREE.Mesh( geometry, ballmaterial );
 
-					mesh.position.set(
-						(Math.random() - 0.5) * 200,
-						Math.random() * 50,
-						(Math.random() - 0.5)  * 200
-					);
-
-					mesh.scale.multiplyScalar(10);
-					object.add( mesh );
+					mesh.position.x = ( Math.random() - 0.5 ) * 200;
+					mesh.position.y = Math.random() * 50;
+					mesh.position.z = ( Math.random() - 0.5 )  * 200;
+					mesh.scale.multiplyScalar( 10 );
+					scene.add( mesh );
 
 				}