CubeCamera now extends from Object3D. Changed code a bit and updated examples.

examples/webgl_materials_cubemap_dynamic.html

@@ -216,40 +216,41 @@
 				// CUBE CAMERA
 
 				cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
+				scene.add( cubeCamera );
 
 				// MATERIALS
 
-				var cubeTarget = cubeCamera.renderTarget;
+				var cubeTarget = cubeCamera.getRenderTarget();
 
 				mlib = {
 
 					body: [],
 
-					"Chrome": 		new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget  } ),
-					"ChromeN": 		new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.75  } ),
-					"Dark chrome": 	new THREE.MeshLambertMaterial( { color: 0x444444, ambient: 0x444444, envMap: cubeTarget } ),
+					"Chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget  } ),
+					"ChromeN": new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.75  } ),
+					"Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, ambient: 0x444444, envMap: cubeTarget } ),
 
-					"Black rough":	new THREE.MeshLambertMaterial( { color: 0x050505, ambient: 0x050505 } ),
+					"Black rough": new THREE.MeshLambertMaterial( { color: 0x050505, ambient: 0x050505 } ),
 
-					"Dark glass":	new THREE.MeshLambertMaterial( { color: 0x101020, ambient: 0x101020, envMap: cubeTarget, opacity: 0.5, transparent: true } ),
-					"Orange glass":	new THREE.MeshLambertMaterial( { color: 0xffbb00, ambient: 0xffbb00, opacity: 0.5, transparent: true } ),
-					"Red glass": 	new THREE.MeshLambertMaterial( { color: 0xff0000, ambient: 0xff0000, opacity: 0.5, transparent: true } ),
+					"Dark glass": new THREE.MeshLambertMaterial( { color: 0x101020, ambient: 0x101020, envMap: cubeTarget, opacity: 0.5, transparent: true } ),
+					"Orange glass": new THREE.MeshLambertMaterial( { color: 0xffbb00, ambient: 0xffbb00, opacity: 0.5, transparent: true } ),
+					"Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, ambient: 0xff0000, opacity: 0.5, transparent: true } ),
 
-					"Black metal":	new THREE.MeshLambertMaterial( { color: 0x222222, ambient: 0x222222, envMap: cubeTarget, combine: THREE.MultiplyOperation } ),
+					"Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, ambient: 0x222222, envMap: cubeTarget, combine: THREE.MultiplyOperation } ),
 					"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff6600, envMap: cubeTarget, combine: THREE.MultiplyOperation } )
 
 				}
 
 				mlib.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0x883300, ambient: 0x883300, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
-				mlib.body.push( [ "Blue", 	new THREE.MeshLambertMaterial( { color: 0x113355, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
-				mlib.body.push( [ "Red", 	new THREE.MeshLambertMaterial( { color: 0x660000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
-				mlib.body.push( [ "Black", 	new THREE.MeshLambertMaterial( { color: 0x000000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
-				mlib.body.push( [ "White", 	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
+				mlib.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x113355, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
+				mlib.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
+				mlib.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
+				mlib.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
 
 				mlib.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular: 0xffaaaa, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
-				mlib.body.push( [ "Gold", 	 new THREE.MeshPhongMaterial( { color: 0xaa9944, specular: 0xbbaa99, shininess: 50, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
-				mlib.body.push( [ "Bronze",  new THREE.MeshPhongMaterial( { color: 0x150505, specular: 0xee6600, shininess: 10, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
-				mlib.body.push( [ "Chrome",  new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
+				mlib.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular: 0xbbaa99, shininess: 50, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
+				mlib.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular: 0xee6600, shininess: 10, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
+				mlib.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
 
 				// FLARES
 
@@ -280,21 +281,18 @@
 
 					};
 
-					var flares = [ // front
-								   [ "a", sa, [ 47, 38, 120 ] ], [ "a", sa, [ 40, 38, 120 ] ], [ "a", sa, [ 32, 38, 122 ] ],
-								   [ "b", sb, [ 47, 38, 120 ] ], [ "b", sb, [ 40, 38, 120 ] ], [ "b", sb, [ 32, 38, 122 ] ],
-
-								   [ "a", sa, [ -47, 38, 120 ] ], [ "a", sa, [ -40, 38, 120 ] ], [ "a", sa, [ -32, 38, 122 ] ],
-								   [ "b", sb, [ -47, 38, 120 ] ], [ "b", sb, [ -40, 38, 120 ] ], [ "b", sb, [ -32, 38, 122 ] ],
-
-								   // back
-								   [ "ar", sa, [ 22, 50, -123 ] ], [ "ar", sa, [ 32, 49, -123 ] ],
-								   [ "br", sb, [ 22, 50, -123 ] ], [ "br", sb, [ 32, 49, -123 ] ],
-
-								   [ "ar", sa, [ -22, 50, -123 ] ], [ "ar", sa, [ -32, 49, -123 ] ],
-								   [ "br", sb, [ -22, 50, -123 ] ], [ "br", sb, [ -32, 49, -123 ] ],
-
-								 ];
+					var flares = [
+						// front
+						[ "a", sa, [ 47, 38, 120 ] ], [ "a", sa, [ 40, 38, 120 ] ], [ "a", sa, [ 32, 38, 122 ] ],
+						[ "b", sb, [ 47, 38, 120 ] ], [ "b", sb, [ 40, 38, 120 ] ], [ "b", sb, [ 32, 38, 122 ] ],
+						[ "a", sa, [ -47, 38, 120 ] ], [ "a", sa, [ -40, 38, 120 ] ], [ "a", sa, [ -32, 38, 122 ] ],
+						[ "b", sb, [ -47, 38, 120 ] ], [ "b", sb, [ -40, 38, 120 ] ], [ "b", sb, [ -32, 38, 122 ] ],
+						// back
+						[ "ar", sa, [ 22, 50, -123 ] ], [ "ar", sa, [ 32, 49, -123 ] ],
+						[ "br", sb, [ 22, 50, -123 ] ], [ "br", sb, [ 32, 49, -123 ] ],
+						[ "ar", sa, [ -22, 50, -123 ] ], [ "ar", sa, [ -32, 49, -123 ] ],
+						[ "br", sb, [ -22, 50, -123 ] ], [ "br", sb, [ -32, 49, -123 ] ],
+					];
 
 					for ( var i = 0; i < flares.length; i ++ ) {
 
@@ -347,20 +345,18 @@
 
 					};
 
-					var flares = [ // front
-								   [ "a", sa, [ 70, 10, 160 ] ], [ "a", sa, [ 66, -1, 175 ] ], [ "a", sa, [ 66, -1, 165 ] ],
-								   [ "b", sb, [ 70, 10, 160 ] ], [ "b", sb, [ 66, -1, 175 ] ], [ "b", sb, [ 66, -1, 165 ] ],
-
-								   [ "a", sa, [ -70, 10, 160 ] ], [ "a", sa, [ -66, -1, 175 ] ], [ "a", sa, [ -66, -1, 165 ] ],
-								   [ "b", sb, [ -70, 10, 160 ] ], [ "b", sb, [ -66, -1, 175 ] ], [ "b", sb, [ -66, -1, 165 ] ],
-
-								   // back
-								   [ "ar", sa, [ 61, 19, -185 ] ], [ "ar", sa, [ 55, 19, -185 ] ],
-								   [ "br", sb, [ 61, 19, -185 ] ], [ "br", sb, [ 55, 19, -185 ] ],
-
-								   [ "ar", sa, [ -61, 19, -185 ] ], [ "ar", sa, [ -55, 19, -185 ] ],
-								   [ "br", sb, [ -61, 19, -185 ] ], [ "br", sb, [ -55, 19, -185 ] ],
-								 ];
+					var flares = [
+						// front
+						[ "a", sa, [ 70, 10, 160 ] ], [ "a", sa, [ 66, -1, 175 ] ], [ "a", sa, [ 66, -1, 165 ] ],
+						[ "b", sb, [ 70, 10, 160 ] ], [ "b", sb, [ 66, -1, 175 ] ], [ "b", sb, [ 66, -1, 165 ] ],
+						[ "a", sa, [ -70, 10, 160 ] ], [ "a", sa, [ -66, -1, 175 ] ], [ "a", sa, [ -66, -1, 165 ] ],
+						[ "b", sb, [ -70, 10, 160 ] ], [ "b", sb, [ -66, -1, 175 ] ], [ "b", sb, [ -66, -1, 165 ] ],
+						// back
+						[ "ar", sa, [ 61, 19, -185 ] ], [ "ar", sa, [ 55, 19, -185 ] ],
+						[ "br", sb, [ 61, 19, -185 ] ], [ "br", sb, [ 55, 19, -185 ] ],
+						[ "ar", sa, [ -61, 19, -185 ] ], [ "ar", sa, [ -55, 19, -185 ] ],
+						[ "br", sb, [ -61, 19, -185 ] ], [ "br", sb, [ -55, 19, -185 ] ],
+					];
 
 
 					for ( var i = 0; i < flares.length; i ++ ) {
@@ -561,8 +557,10 @@
 
 				var shadowPlane = new THREE.PlaneGeometry( 400, 400 );
 				var shadowMaterial = new THREE.MeshBasicMaterial( {
+
 					color: 0xff0000, opacity: 0.35, transparent: true, map: shadowTexture,
 					polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
+
 				} );
 
 				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );

examples/webgl_materials_cubemap_dynamic2.html

@@ -68,13 +68,14 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				cubeCamera = new THREE.CubeCamera( 1, 1000, 256 );
-				cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
+				cubeCamera.getRenderTarget().minFilter = THREE.LinearMipMapLinearFilter;
+				scene.add( cubeCamera );
 
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				var material = new THREE.MeshBasicMaterial( { envMap: cubeCamera.renderTarget } );
+				var material = new THREE.MeshBasicMaterial( { envMap: cubeCamera.getRenderTarget() } );
 				
 				sphere = new THREE.Mesh( new THREE.SphereGeometry( 20, 60, 40 ), material );
 				scene.add( sphere );

examples/webgl_shading_physical.html

@@ -72,6 +72,8 @@
 
 			var mesh, geometry;
 
+			var cubeCamera;
+
 			var sunLight, pointLight, ambientLight;
 
 			var morph;
@@ -136,7 +138,7 @@
 				// CUBE CAMERA
 
 				cubeCamera = new THREE.CubeCamera( 1, FAR, 128 );
-				var cubeTarget = cubeCamera.renderTarget;
+				scene.add( cubeCamera );
 
 				// TEXTURES
 
@@ -205,7 +207,7 @@
 				// MATERIALS
 
 				var shader = THREE.ShaderUtils.lib[ "cube" ];
-				shader.uniforms[ "tCube" ].texture = cubeTarget;
+				shader.uniforms[ "tCube" ].texture = cubeCamera.getRenderTarget();
 				shader.uniforms[ "tFlip" ].value = 1;
 
 				var materialCube = new THREE.ShaderMaterial( {
@@ -218,7 +220,7 @@
 
 				var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, ambient: 0x444444, color: 0xffffff, map: textureNoiseColor } );
 				var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, ambient: 0x444444, color: 0xffffff, specular: 0x999999, map: textureLava } );
-				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, ambient: 0x444444, color: 0xffffff, specular: 0x999999, envMap: cubeTarget } );
+				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, ambient: 0x444444, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.getRenderTarget() } );
 
 				// OBJECTS
 
@@ -511,23 +513,26 @@
 
 			function onKeyDown ( event ) {
 
-				switch( event.keyCode ) {
+				switch ( event.keyCode ) {
+
+					case 78: /*N*/
+
+						if ( tweenDirection == 1 ) {
 
-					case 78: /*N*/   if ( tweenDirection == 1 ) {
+							tweenDay.stop();
+							tweenNight.start();
 
-										tweenDay.stop();
-										tweenNight.start();
+							tweenDirection = -1;
 
-										tweenDirection = -1;
+						} else {
 
-									} else {
+							tweenNight.stop();
+							tweenDay.start();
 
-										tweenNight.stop();
-										tweenDay.start();
+							tweenDirection = 1;
 
-										tweenDirection = 1;
+						}
 
-									}
 					break;
 
 				}

src/extras/cameras/CubeCamera.js

@@ -7,75 +7,77 @@
 
 THREE.CubeCamera = function ( near, far, cubeResolution ) {
 
-	this.position = new THREE.Vector3();
+	THREE.Object3D.call( this );
 
 	var fov = 90, aspect = 1;
 
 	var cameraPX = new THREE.PerspectiveCamera( fov, aspect, near, far );
-	var cameraNX = new THREE.PerspectiveCamera( fov, aspect, near, far );
-
-	var cameraPY = new THREE.PerspectiveCamera( fov, aspect, near, far );
-	var cameraNY = new THREE.PerspectiveCamera( fov, aspect, near, far );
-
-	var cameraPZ = new THREE.PerspectiveCamera( fov, aspect, near, far );
-	var cameraNZ = new THREE.PerspectiveCamera( fov, aspect, near, far );
-
-	cameraPX.position = this.position;
 	cameraPX.up.set( 0, -1, 0 );
 	cameraPX.lookAt( new THREE.Vector3( 1, 0, 0 ) );
+	this.add( cameraPX );
 
-	cameraNX.position = this.position;
+	var cameraNX = new THREE.PerspectiveCamera( fov, aspect, near, far );
 	cameraNX.up.set( 0, -1, 0 );
 	cameraNX.lookAt( new THREE.Vector3( -1, 0, 0 ) );
+	this.add( cameraNX );
 
-	cameraPY.position = this.position;
+	var cameraPY = new THREE.PerspectiveCamera( fov, aspect, near, far );
 	cameraPY.up.set( 0, 0, 1 );
 	cameraPY.lookAt( new THREE.Vector3( 0, 1, 0 ) );
+	this.add( cameraPY );
 
-	cameraNY.position = this.position;
+	var cameraNY = new THREE.PerspectiveCamera( fov, aspect, near, far );
 	cameraNY.up.set( 0, 0, -1 );
 	cameraNY.lookAt( new THREE.Vector3( 0, -1, 0 ) );
+	this.add( cameraNY );
 
-	cameraPZ.position = this.position;
+	var cameraPZ = new THREE.PerspectiveCamera( fov, aspect, near, far );
 	cameraPZ.up.set( 0, -1, 0 );
 	cameraPZ.lookAt( new THREE.Vector3( 0, 0, 1 ) );
+	this.add( cameraPZ );
 
-	cameraNZ.position = this.position;
+	var cameraNZ = new THREE.PerspectiveCamera( fov, aspect, near, far );
 	cameraNZ.up.set( 0, -1, 0 );
 	cameraNZ.lookAt( new THREE.Vector3( 0, 0, -1 ) );
+	this.add( cameraNZ );
 
-	// cube render target
+	var renderTarget = new THREE.WebGLRenderTargetCube( cubeResolution, cubeResolution, { format: THREE.RGBFormat, magFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter } );
 
-	this.renderTarget = new THREE.WebGLRenderTargetCube( cubeResolution, cubeResolution, { format: THREE.RGBFormat, magFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter } );
+	this.getRenderTarget = function () {
 
-	this.updateCubeMap = function ( renderer, scene ) {
+		return renderTarget;
 
-		var cubeTarget = this.renderTarget;
+	};
+
+	this.updateCubeMap = function ( renderer, scene ) {
 
-		var oldGenerateMipmaps = cubeTarget.generateMipmaps;
+		var generateMipmaps = renderTarget.generateMipmaps;
 
-		cubeTarget.generateMipmaps = false;
+		renderTarget.generateMipmaps = false;
 
-		cubeTarget.activeCubeFace = 0;
-		renderer.render( scene, cameraPX, cubeTarget );
+		renderTarget.activeCubeFace = 0;
+		renderer.render( scene, cameraPX, renderTarget );
 
-		cubeTarget.activeCubeFace = 1;
-		renderer.render( scene, cameraNX, cubeTarget );
+		renderTarget.activeCubeFace = 1;
+		renderer.render( scene, cameraNX, renderTarget );
 
-		cubeTarget.activeCubeFace = 2;
-		renderer.render( scene, cameraPY, cubeTarget );
+		renderTarget.activeCubeFace = 2;
+		renderer.render( scene, cameraPY, renderTarget );
 
-		cubeTarget.activeCubeFace = 3;
-		renderer.render( scene, cameraNY, cubeTarget );
+		renderTarget.activeCubeFace = 3;
+		renderer.render( scene, cameraNY, renderTarget );
 
-		cubeTarget.activeCubeFace = 4;
-		renderer.render( scene, cameraPZ, cubeTarget );
+		renderTarget.activeCubeFace = 4;
+		renderer.render( scene, cameraPZ, renderTarget );
 
-		cubeTarget.generateMipmaps = oldGenerateMipmaps;
+		renderTarget.generateMipmaps = generateMipmaps;
 
-		cubeTarget.activeCubeFace = 5;
-		renderer.render( scene, cameraNZ, cubeTarget );
+		renderTarget.activeCubeFace = 5;
+		renderer.render( scene, cameraNZ, renderTarget );
 
 	};
 
 };
+
+THREE.CubeCamera.prototype = new THREE.Object3D();
+THREE.CubeCamera.prototype.constructor = THREE.CubeCamera;