Merge pull request #19138 from Mugen87/dev43

CubeCamera: Inject WebGLCubeRenderTarget on creation.

docs/api/en/cameras/CubeCamera.html

@@ -16,12 +16,16 @@
 
 		<h2>Code Example</h2>
 
-		<code>// Create cube camera
-		var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
+		<code>
+		// Create cube render target
+		var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
+
+		// Create cube camera
+		var cubeCamera = new THREE.CubeCamera( 1, 100000, cubeRenderTarget );
 		scene.add( cubeCamera );
 
 		// Create car
-		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget.texture } );
+		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeRenderTarget.texture } );
 		var car = new Mesh( carGeometry, chromeMaterial );
 		scene.add( car );
 
@@ -45,36 +49,29 @@
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [param:Number near], [param:Number far], [param:Number cubeResolution], [param:Object options] )</h3>
+		<h3>[name]( [param:Number near], [param:Number far], [param:WebGLCubeRenderTarget renderTarget] )</h3>
 		<p>
 		near -- The near clipping distance. <br />
-		far -- The far clipping distance <br />
-		cubeResolution -- Sets the length of the cube's edges. <br />
-		options - (optional) object that holds texture parameters passed to the auto-generated WebGLCubeRenderTarget.
-		If not specified, the options default to:
-		<code>
-		{ format: RGBFormat, magFilter: LinearFilter, minFilter: LinearFilter }
-		</code>
-
+		far -- The far clipping distance. <br />
+		renderTarget -- The destination cube render target.
 		</p>
+
 		<p>
 		Constructs a CubeCamera that contains 6 [page:PerspectiveCamera PerspectiveCameras] that
 		render to a [page:WebGLCubeRenderTarget].
 		</p>
 
-
 		<h2>Properties</h2>
 		<p>See the base [page:Object3D] class for common properties.</p>
 
 		<h3>[property:WebGLCubeRenderTarget renderTarget]</h3>
 		<p>
-		The cube texture that gets generated.
+		The destination cube render target.
 		</p>
 
 		<h2>Methods</h2>
 		<p>See the base [page:Object3D] class for common methods.</p>
 
-
 		<h3>[method:null update]( [param:WebGLRenderer renderer], [param:Scene scene] )</h3>
 		<p>
 		renderer -- The current WebGL renderer <br />
@@ -86,7 +83,7 @@
 
 		<h3>[method:null clear]( [param:WebGLRenderer renderer], [param:Boolean color], [param:Boolean depth], [param:Boolean stencil] )</h3>
 		<p>
-		Call this to clear the [page:CubeCamera.renderTarget renderTarget] color, depth, and/or stencil buffers.
+		Call this to clear the renderTarget's color, depth, and/or stencil buffers.
 		The color buffer is set to the renderer's current clear color. Arguments default to *true*.
 		</p>
 

docs/api/zh/cameras/CubeCamera.html

@@ -17,12 +17,16 @@
 
 		<h2>代码示例</h2>
 
-		<code>// Create cube camera
-		var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
+		<code>
+		// Create cube render target
+		var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
+
+		// Create cube camera
+		var cubeCamera = new THREE.CubeCamera( 1, 100000, cubeRenderTarget );
 		scene.add( cubeCamera );
 
 		// Create car
-		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget.texture } );
+		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeRenderTarget.texture } );
 		var car = new Mesh( carGeometry, chromeMaterial );
 		scene.add( car );
 
@@ -40,7 +44,6 @@
 
 		<p>
 			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
-			[example:webgl_materials_cubemap_dynamic2 materials / cubemap / dynamic2 ]<br />
 			[example:webgl_shading_physical shading / physical ]
 		</p>
 
@@ -48,12 +51,12 @@
 
 
 
-		<h3>[name]( [param:Number near], [param:Number far], [param:Number cubeResolution] )</h3>
+		<h3>[name]( [param:Number near], [param:Number far], [param:WebGLCubeRenderTarget renderTarget] )</h3>
 		<p>
 
 		near -- 近剪切面的距离<br />
 		far -- 远剪切面的距离<br />
-		cubeResolution -- 设置立方体边缘的长度
+		renderTarget -- The destination cube render target.
 		</p>
 		<p>
 			构造一个包含6个[page:PerspectiveCamera PerspectiveCameras]（透视摄像机）的立方摄像机，并将其拍摄的场景渲染到一个[page:WebGLCubeRenderTarget]上。
@@ -66,8 +69,7 @@
 
 		<h3>[property:WebGLCubeRenderTarget renderTarget]</h3>
 		<p>
-			生成的立方体纹理<br>
-			（译注：生成的立方体纹理保存在其中的.texture对象中，可作为贴图赋值给其他材质）
+			The destination cube render target.
 		</p>
 
 		<h2>方法</h2>

examples/webgl_lightprobe_cubecamera.html

@@ -42,10 +42,12 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 30 );
 
-				cubeCamera = new THREE.CubeCamera( 1, 1000, 256, { format: THREE.RGBAFormat, magFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter } );
+				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256, {
+					encoding: THREE.sRGBEncoding, // since gamma is applied during rendering, the cubeCamera renderTarget texture encoding must be sRGBEncoding
+					format: THREE.RGBAFormat
+				} );
 
-				//Since gamma is applied during rendering, the cubeCamera renderTarget texture encoding must be sRGBEncoding
-				cubeCamera.renderTarget.texture.encoding = THREE.sRGBEncoding;
+				cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );
 
 				// controls
 				var controls = new OrbitControls( camera, renderer.domElement );
@@ -79,7 +81,7 @@
 
 					cubeCamera.update( renderer, scene );
 
-					lightProbe.copy( LightProbeGenerator.fromCubeRenderTarget( renderer, cubeCamera.renderTarget ) );
+					lightProbe.copy( LightProbeGenerator.fromCubeRenderTarget( renderer, cubeRenderTarget ) );
 
 					scene.add( new LightProbeHelper( lightProbe, 5 ) );
 

examples/webgl_materials_cubemap_dynamic.html

@@ -17,7 +17,7 @@
 			var camera, scene, renderer;
 			var cube, sphere, torus, material;
 
-			var count = 0, cubeCamera1, cubeCamera2;
+			var count = 0, cubeCamera1, cubeCamera2, cubeRenderTarget1, cubeRenderTarget2;
 
 			var onPointerDownPointerX, onPointerDownPointerY, onPointerDownLon, onPointerDownLat;
 
@@ -57,14 +57,12 @@
 
 				//
 
-				cubeCamera1 = new THREE.CubeCamera( 1, 1000, 256 );
-				cubeCamera1.renderTarget.texture.generateMipmaps = true;
-				cubeCamera1.renderTarget.texture.minFilter = THREE.LinearMipmapLinearFilter;
+				cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget( 256, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
+				cubeCamera1 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget1 );
 				scene.add( cubeCamera1 );
 
-				cubeCamera2 = new THREE.CubeCamera( 1, 1000, 256 );
-				cubeCamera2.renderTarget.texture.generateMipmaps = true;
-				cubeCamera2.renderTarget.texture.minFilter = THREE.LinearMipmapLinearFilter;
+				cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget( 256, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
+				cubeCamera2 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget2 );
 				scene.add( cubeCamera2 );
 
 				document.body.appendChild( renderer.domElement );
@@ -72,7 +70,7 @@
 				//
 
 				material = new THREE.MeshBasicMaterial( {
-					envMap: cubeCamera2.renderTarget.texture
+					envMap: cubeRenderTarget2.texture
 				} );
 
 				sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
@@ -183,12 +181,12 @@
 				if ( count % 2 === 0 ) {
 
 					cubeCamera1.update( renderer, scene );
-					material.envMap = cubeCamera1.renderTarget.texture;
+					material.envMap = cubeRenderTarget1.texture;
 
 				} else {
 
 					cubeCamera2.update( renderer, scene );
-					material.envMap = cubeCamera2.renderTarget.texture;
+					material.envMap = cubeRenderTarget2.texture;
 
 				}
 

examples/webgl_materials_envmaps_parallax.html

@@ -280,10 +280,13 @@
 				cameraControls.update();
 
 				// cube camera for environment map
-				cubeCamera = new THREE.CubeCamera( 1, 1000, 512 );
-				cubeCamera.renderTarget.texture.generateMipmaps = true;
-				cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipmapLinearFilter;
-				cubeCamera.renderTarget.texture.mapping = THREE.CubeReflectionMapping;
+
+				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 512, {
+					format: THREE.RGBFormat,
+					generateMipmaps: true,
+					minFilter: THREE.LinearMipmapLinearFilter
+				} );
+				cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );
 
 				cubeCamera.position.set( 0, - 100, 0 );
 				scene.add( cubeCamera );
@@ -297,14 +300,14 @@
 
 				var defaultMat = new THREE.MeshPhysicalMaterial( {
 					roughness: 1,
-					envMap: cubeCamera.renderTarget.texture,
+					envMap: cubeRenderTarget.texture,
 					roughnessMap: rMap
 				} );
 
 				var boxProjectedMat = new THREE.MeshPhysicalMaterial( {
 					color: new THREE.Color( '#ffffff' ),
 					roughness: 1,
-					envMap: cubeCamera.renderTarget.texture,
+					envMap: cubeRenderTarget.texture,
 					roughnessMap: rMap
 				} );
 

examples/webgl_shaders_ocean.html

@@ -101,11 +101,10 @@
 					azimuth: 0.205
 				};
 
-				var cubeCamera = new THREE.CubeCamera( 0.1, 1, 512 );
-				cubeCamera.renderTarget.texture.generateMipmaps = true;
-				cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipmapLinearFilter;
+				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 512, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
+				var cubeCamera = new THREE.CubeCamera( 0.1, 1, cubeRenderTarget );
 
-				scene.background = cubeCamera.renderTarget;
+				scene.background = cubeRenderTarget;
 
 				function updateSun() {
 
@@ -149,7 +148,7 @@
 					vertexColors: true,
 					roughness: 0.0,
 					flatShading: true,
-					envMap: cubeCamera.renderTarget.texture,
+					envMap: cubeRenderTarget.texture,
 					side: THREE.DoubleSide
 				} );
 

examples/webgl_shading_physical.html

@@ -67,7 +67,13 @@
 
 				// CUBE CAMERA
 
-				cubeCamera = new THREE.CubeCamera( 1, 10000, 128, { encoding: THREE.sRGBEncoding } );
+				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, {
+					format: THREE.RGBFormat,
+					generateMipmaps: true,
+					minFilter: THREE.LinearMipmapLinearFilter,
+					encoding: THREE.sRGBEncoding
+				} );
+				cubeCamera = new THREE.CubeCamera( 1, 10000, cubeRenderTarget );
 
 				// TEXTURES
 				var textureLoader = new THREE.TextureLoader();
@@ -110,7 +116,7 @@
 
 				var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
 				var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
-				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget.texture } );
+				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeRenderTarget.texture } );
 
 				// OBJECTS
 

src/cameras/CubeCamera.d.ts

@@ -1,12 +1,11 @@
 import { WebGLCubeRenderTarget } from './../renderers/WebGLCubeRenderTarget';
-import { WebGLRenderTargetOptions } from './../renderers/WebGLRenderTarget';
 import { Scene } from './../scenes/Scene';
 import { WebGLRenderer } from './../renderers/WebGLRenderer';
 import { Object3D } from './../core/Object3D';
 
 export class CubeCamera extends Object3D {
 
-	constructor( near?: number, far?: number, cubeResolution?: number, options?: WebGLRenderTargetOptions );
+	constructor( near: number, far: number, renderTarget: WebGLCubeRenderTarget );
 
 	type: 'CubeCamera';
 

src/cameras/CubeCamera.js

@@ -1,6 +1,4 @@
 import { Object3D } from '../core/Object3D.js';
-import { WebGLCubeRenderTarget } from '../renderers/WebGLCubeRenderTarget.js';
-import { LinearFilter, RGBFormat } from '../constants.js';
 import { Vector3 } from '../math/Vector3.js';
 import { PerspectiveCamera } from './PerspectiveCamera.js';
 
@@ -13,12 +11,21 @@ import { PerspectiveCamera } from './PerspectiveCamera.js';
 
 var fov = 90, aspect = 1;
 
-function CubeCamera( near, far, cubeResolution, options ) {
+function CubeCamera( near, far, renderTarget ) {
 
 	Object3D.call( this );
 
 	this.type = 'CubeCamera';
 
+	if ( renderTarget.isWebGLCubeRenderTarget !== true ) {
+
+		console.error( 'THREE.CubeCamera: The constructor now expects an instance of WebGLCubeRenderTarget as third parameter.' );
+		return;
+
+	}
+
+	this.renderTarget = renderTarget;
+
 	var cameraPX = new PerspectiveCamera( fov, aspect, near, far );
 	cameraPX.up.set( 0, - 1, 0 );
 	cameraPX.lookAt( new Vector3( 1, 0, 0 ) );
@@ -49,18 +56,12 @@ function CubeCamera( near, far, cubeResolution, options ) {
 	cameraNZ.lookAt( new Vector3( 0, 0, - 1 ) );
 	this.add( cameraNZ );
 
-	options = options || { format: RGBFormat, magFilter: LinearFilter, minFilter: LinearFilter };
-
-	this.renderTarget = new WebGLCubeRenderTarget( cubeResolution, options );
-	this.renderTarget.texture.name = "CubeCamera";
-
 	this.update = function ( renderer, scene ) {
 
 		if ( this.parent === null ) this.updateMatrixWorld();
 
 		var currentRenderTarget = renderer.getRenderTarget();
 
-		var renderTarget = this.renderTarget;
 		var generateMipmaps = renderTarget.texture.generateMipmaps;
 
 		renderTarget.texture.generateMipmaps = false;
@@ -93,8 +94,6 @@ function CubeCamera( near, far, cubeResolution, options ) {
 
 		var currentRenderTarget = renderer.getRenderTarget();
 
-		var renderTarget = this.renderTarget;
-
 		for ( var i = 0; i < 6; i ++ ) {
 
 			renderer.setRenderTarget( renderTarget, i );

src/renderers/WebGLCubeRenderTarget.js

@@ -110,11 +110,7 @@ WebGLCubeRenderTarget.prototype.fromEquirectangularTexture = function ( renderer
 
 	scene.add( mesh );
 
-	var camera = new CubeCamera( 1, 10, 1 );
-
-	camera.renderTarget = this;
-	camera.renderTarget.texture.name = 'CubeCameraTexture';
-
+	var camera = new CubeCamera( 1, 10, this );
 	camera.update( renderer, scene );
 
 	mesh.geometry.dispose();