Browse Source

Merge pull request #10745 from godlzr/AddInterfaceToCombinedCamera

Make combinedCamera have the same interfaces as perpective/orthographic camera
Mr.doob 8 years ago
parent
commit
8d323fe36b
2 changed files with 101 additions and 12 deletions
  1. 34 0
      docs/examples/cameras/CombinedCamera.html
  2. 67 12
      examples/js/cameras/CombinedCamera.js

+ 34 - 0
docs/examples/cameras/CombinedCamera.html

@@ -52,6 +52,9 @@
 		Gets or sets the camera frustum vertical field of view in perspective view.
 		</div>
 
+		<h3>[property:Float aspect]</h3>
+		<div>Camera frustum aspect ratio, usually the canvas width / canvas height.</div>
+
 		<h3>[property:number left]</h3>
 		<div>
 		Gets or sets the camera frustum left plane in orthographic view.
@@ -87,6 +90,13 @@
 		Gets camera frustum far plane.
 		</div>
 
+		<h3>[property:Object view]</h3>
+		<div>
+			Frustum window specification or null.
+			This is set using the [page:CombinedCamera.setViewOffset .setViewOffset] method
+			and cleared using [page:CombinedCamera.clearViewOffset .clearViewOffset].
+		</div>
+
 		<h3>[property:Matrix4 projectionMatrix]</h3>
 		<div>
 		This is the matrix which contains the projection.
@@ -193,6 +203,30 @@
 		Updates the ProjectionMatrix.
 		</div>
 
+		<h3>[method:Camera copy]( [page:Camera source] )</h3>
+		<div>
+		Copy the properties from the source camera into this one.
+		</div>
+
+		<h3>[method:null setViewOffset]( [page:Float fullWidth], [page:Float fullHeight], [page:Float x], [page:Float y], [page:Float width], [page:Float height] )</h3>
+		<div>
+		fullWidth — full width of multiview setup<br />
+		fullHeight — full height of multiview setup<br />
+		x — horizontal offset of subcamera<br />
+		y — vertical offset of subcamera<br />
+		width — width of subcamera<br />
+		height — height of subcamera<br /><br />
+
+			Sets an offset in a larger [link:https://en.wikipedia.org/wiki/Viewing_frustum viewing frustum].
+			This is useful for multi-window or multi-monitor/multi-machine setups.
+			For an example on how to use it see [page:PerspectiveCamera.setViewOffset PerspectiveCamera].
+		</div>
+
+
+		<h3>[method:null clearViewOffset]()</h3>
+		<div>
+		Removes any offset set by the .setViewOffset method.
+		</div>
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/cameras/CombinedCamera.js examples/cameras/CombinedCamera.js]

+ 67 - 12
examples/js/cameras/CombinedCamera.js

@@ -15,18 +15,22 @@ THREE.CombinedCamera = function ( width, height, fov, near, far, orthoNear, orth
 
 	this.fov = fov;
 
+	this.far = far;
+	this.near = near;
+
 	this.left = - width / 2;
 	this.right = width / 2;
 	this.top = height / 2;
 	this.bottom = - height / 2;
 
+	this.aspect =  width / height;
+	this.zoom = 1;
+	this.view = null;
 	// We could also handle the projectionMatrix internally, but just wanted to test nested camera objects
 
 	this.cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 	orthoNear, orthoFar );
 	this.cameraP = new THREE.PerspectiveCamera( fov, width / height, near, far );
 
-	this.zoom = 1;
-
 	this.toPerspective();
 
 };
@@ -41,7 +45,9 @@ THREE.CombinedCamera.prototype.toPerspective = function () {
 	this.near = this.cameraP.near;
 	this.far = this.cameraP.far;
 
+	this.cameraP.aspect = this.aspect;
 	this.cameraP.fov =  this.fov / this.zoom ;
+	this.cameraP.view = this.view;
 
 	this.cameraP.updateProjectionMatrix();
 
@@ -75,16 +81,7 @@ THREE.CombinedCamera.prototype.toOrthographic = function () {
 	this.cameraO.right = halfWidth;
 	this.cameraO.top = halfHeight;
 	this.cameraO.bottom = - halfHeight;
-
-	// this.cameraO.left = -farHalfWidth;
-	// this.cameraO.right = farHalfWidth;
-	// this.cameraO.top = farHalfHeight;
-	// this.cameraO.bottom = -farHalfHeight;
-
-	// this.cameraO.left = this.left / this.zoom;
-	// this.cameraO.right = this.right / this.zoom;
-	// this.cameraO.top = this.top / this.zoom;
-	// this.cameraO.bottom = this.bottom / this.zoom;
+	this.cameraO.view = this.view;
 
 	this.cameraO.updateProjectionMatrix();
 
@@ -97,6 +94,64 @@ THREE.CombinedCamera.prototype.toOrthographic = function () {
 
 };
 
+THREE.CombinedCamera.prototype.copy = function ( source ) {
+
+	THREE.Camera.prototype.copy.call( this, source );
+
+	this.fov = source.fov;
+	this.far = source.far;
+	this.near = source.near;
+
+	this.left = source.left;
+	this.right = source.right;
+	this.top = source.top;
+	this.bottom = source.bottom;
+
+	this.zoom = source.zoom;
+	this.view = source.view === null ? null : Object.assign( {}, source.view );
+	this.aspect = source.aspect;
+
+	this.cameraO.copy( source.cameraO );
+	this.cameraP.copy( source.cameraP );
+
+	this.inOrthographicMode = source.inOrthographicMode;
+	this.inPerspectiveMode = source.inPerspectiveMode;
+
+	return this;
+
+};
+
+THREE.CombinedCamera.prototype.setViewOffset = function( fullWidth, fullHeight, x, y, width, height ) {
+
+	this.view = {
+		fullWidth: fullWidth,
+		fullHeight: fullHeight,
+		offsetX: x,
+		offsetY: y,
+		width: width,
+		height: height
+	};
+
+	if ( this.inPerspectiveMode ) {
+
+		this.aspect = fullWidth / fullHeight;
+
+		this.toPerspective();
+
+	} else {
+
+		this.toOrthographic();
+
+	}
+
+};
+
+THREE.CombinedCamera.prototype.clearViewOffset = function() {
+
+	this.view = null;
+	this.updateProjectionMatrix();
+
+};
 
 THREE.CombinedCamera.prototype.setSize = function( width, height ) {