Merge pull request #12345 from Mugen87/dev4

 Examples: Rename Mirror to Reflector

examples/js/nodes/inputs/MirrorNode.js → examples/js/nodes/inputs/ReflectorNode.js

@@ -1,4 +1,4 @@
-THREE.MirrorNode = function( mirror, camera, options ) {
+THREE.ReflectorNode = function( mirror, camera, options ) {
 
 	THREE.TempNode.call( this, 'v4' );
 
@@ -6,19 +6,19 @@ THREE.MirrorNode = function( mirror, camera, options ) {
 
 	this.textureMatrix = new THREE.Matrix4Node( this.mirror.material.uniforms.textureMatrix.value );
 
-	this.worldPosition = new THREE.PositionNode( THREE.PositionNode.WORLD );
+	this.localPosition = new THREE.PositionNode( THREE.PositionNode.LOCAL );
 
-	this.coord = new THREE.OperatorNode( this.textureMatrix, this.worldPosition, THREE.OperatorNode.MUL );
+	this.coord = new THREE.OperatorNode( this.textureMatrix, this.localPosition, THREE.OperatorNode.MUL );
 	this.coordResult = new THREE.OperatorNode( null, this.coord, THREE.OperatorNode.ADD );
 
-	this.texture = new THREE.TextureNode( this.mirror.material.uniforms.mirrorSampler.value, this.coord, null, true );
+	this.texture = new THREE.TextureNode( this.mirror.material.uniforms.tDiffuse.value, this.coord, null, true );
 
 };
 
-THREE.MirrorNode.prototype = Object.create( THREE.TempNode.prototype );
-THREE.MirrorNode.prototype.constructor = THREE.MirrorNode;
+THREE.ReflectorNode.prototype = Object.create( THREE.TempNode.prototype );
+THREE.ReflectorNode.prototype.constructor = THREE.ReflectorNode;
 
-THREE.MirrorNode.prototype.generate = function( builder, output ) {
+THREE.ReflectorNode.prototype.generate = function( builder, output ) {
 
 	var material = builder.material;
 
@@ -37,7 +37,7 @@ THREE.MirrorNode.prototype.generate = function( builder, output ) {
 
 	} else {
 
-		console.warn( "THREE.MirrorNode is not compatible with " + builder.shader + " shader." );
+		console.warn( "THREE.ReflectorNode is not compatible with " + builder.shader + " shader." );
 
 		return builder.format( 'vec4(0.0)', this.type, output );
 

examples/js/objects/MirrorRTT.js

@@ -1,9 +0,0 @@
-THREE.MirrorRTT = function ( width, height, options ) {
-
-	THREE.Mirror.call( this, width, height, options );
-
-	this.geometry.setDrawRange( 0, 0 ); // avoid rendering geometry
-
-};
-
-THREE.MirrorRTT.prototype = Object.create( THREE.Mirror.prototype );

examples/js/objects/Mirror.js → examples/js/objects/Reflector.js

@@ -2,11 +2,11 @@
  * @author Slayvin / http://slayvin.net
  */
 
-THREE.Mirror = function ( width, height, options ) {
+THREE.Reflector = function ( width, height, options ) {
 
 	THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) );
 
-	this.type = 'Mirror';
+	this.type = 'Reflector';
 
 	var scope = this;
 
@@ -16,14 +16,14 @@ THREE.Mirror = function ( width, height, options ) {
 	var textureWidth = options.textureWidth || 512;
 	var textureHeight = options.textureHeight || 512;
 	var clipBias = options.clipBias || 0;
-	var shader = options.shader || THREE.Mirror.MirrorShader;
+	var shader = options.shader || THREE.Reflector.ReflectorShader;
 	var recursion = options.recursion !== undefined ? options.recursion : 0;
 
 	//
 
-	var mirrorPlane = new THREE.Plane();
+	var reflectorPlane = new THREE.Plane();
 	var normal = new THREE.Vector3();
-	var mirrorWorldPosition = new THREE.Vector3();
+	var reflectorWorldPosition = new THREE.Vector3();
 	var cameraWorldPosition = new THREE.Vector3();
 	var rotationMatrix = new THREE.Matrix4();
 	var lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
@@ -75,7 +75,7 @@ THREE.Mirror = function ( width, height, options ) {
 
 		}
 
-		mirrorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
+		reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
 		cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
 
 		rotationMatrix.extractRotation( scope.matrixWorld );
@@ -83,14 +83,14 @@ THREE.Mirror = function ( width, height, options ) {
 		normal.set( 0, 0, 1 );
 		normal.applyMatrix4( rotationMatrix );
 
-		view.subVectors( mirrorWorldPosition, cameraWorldPosition );
+		view.subVectors( reflectorWorldPosition, cameraWorldPosition );
 
-		// Avoid rendering when mirror is facing away
+		// Avoid rendering when reflector is facing away
 
 		if ( view.dot( normal ) > 0 ) return;
 
 		view.reflect( normal ).negate();
-		view.add( mirrorWorldPosition );
+		view.add( reflectorWorldPosition );
 
 		rotationMatrix.extractRotation( camera.matrixWorld );
 
@@ -98,9 +98,9 @@ THREE.Mirror = function ( width, height, options ) {
 		lookAtPosition.applyMatrix4( rotationMatrix );
 		lookAtPosition.add( cameraWorldPosition );
 
-		target.subVectors( mirrorWorldPosition, lookAtPosition );
+		target.subVectors( reflectorWorldPosition, lookAtPosition );
 		target.reflect( normal ).negate();
-		target.add( mirrorWorldPosition );
+		target.add( reflectorWorldPosition );
 
 		virtualCamera.position.copy( view );
 		virtualCamera.up.set( 0, 1, 0 );
@@ -128,10 +128,10 @@ THREE.Mirror = function ( width, height, options ) {
 
 		// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
 		// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-		mirrorPlane.setFromNormalAndCoplanarPoint( normal, mirrorWorldPosition );
-		mirrorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
+		reflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
+		reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
 
-		clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
+		clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );
 
 		var projectionMatrix = virtualCamera.projectionMatrix;
 
@@ -198,10 +198,10 @@ THREE.Mirror = function ( width, height, options ) {
 
 };
 
-THREE.Mirror.prototype = Object.create( THREE.Mesh.prototype );
-THREE.Mirror.prototype.constructor = THREE.Mirror;
+THREE.Reflector.prototype = Object.create( THREE.Mesh.prototype );
+THREE.Reflector.prototype.constructor = THREE.Reflector;
 
-THREE.Mirror.MirrorShader = {
+THREE.Reflector.ReflectorShader = {
 
 	uniforms: {
 

examples/js/objects/ReflectorRTT.js

@@ -0,0 +1,9 @@
+THREE.ReflectorRTT = function ( width, height, options ) {
+
+	THREE.Reflector.call( this, width, height, options );
+
+	this.geometry.setDrawRange( 0, 0 ); // avoid rendering geometry
+
+};
+
+THREE.ReflectorRTT.prototype = Object.create( THREE.Reflector.prototype );

examples/js/objects/Water2.js

@@ -40,9 +40,9 @@ THREE.Water = function ( width, height, options ) {
 
 	// internal components
 
-	if ( THREE.Mirror === undefined ) {
+	if ( THREE.Reflector === undefined ) {
 
-		console.error( 'THREE.Water: Required component THREE.Mirror not found.' );
+		console.error( 'THREE.Water: Required component THREE.Reflector not found.' );
 		return;
 
 	}
@@ -54,7 +54,7 @@ THREE.Water = function ( width, height, options ) {
 
 	}
 
-	var mirror = new THREE.Mirror( width, height, {
+	var reflector = new THREE.Reflector( width, height, {
 		textureWidth: textureWidth,
 		textureHeight: textureHeight,
 		clipBias: clipBias
@@ -66,7 +66,7 @@ THREE.Water = function ( width, height, options ) {
 		clipBias: clipBias
 	} );
 
-	mirror.matrixAutoUpdate = false;
+	reflector.matrixAutoUpdate = false;
 	refractor.matrixAutoUpdate = false;
 
 	// material
@@ -104,7 +104,7 @@ THREE.Water = function ( width, height, options ) {
 	normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping;
 	normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping;
 
-	this.material.uniforms.tReflectionMap.value = mirror.getRenderTarget().texture;
+	this.material.uniforms.tReflectionMap.value = reflector.getRenderTarget().texture;
 	this.material.uniforms.tRefractionMap.value = refractor.getRenderTarget().texture;
 	this.material.uniforms.tNormalMap0.value = normalMap0;
 	this.material.uniforms.tNormalMap1.value = normalMap1;
@@ -173,10 +173,10 @@ THREE.Water = function ( width, height, options ) {
 
 		scope.visible = false;
 
-		mirror.matrixWorld.copy( scope.matrixWorld );
+		reflector.matrixWorld.copy( scope.matrixWorld );
 		refractor.matrixWorld.copy( scope.matrixWorld );
 
-		mirror.onBeforeRender( renderer, scene, camera );
+		reflector.onBeforeRender( renderer, scene, camera );
 		refractor.onBeforeRender( renderer, scene, camera );
 
 		scope.visible = true;

examples/webgl_mirror.html

@@ -35,7 +35,7 @@
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="js/objects/Mirror.js"></script>
+		<script src="js/objects/Reflector.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script>
@@ -86,9 +86,9 @@
 
 				var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
 
-				// MIRROR planes
+				// reflector/mirror planes
 
-				var groundMirror = new THREE.Mirror( 100, 100, {
+				var groundMirror = new THREE.Reflector( 100, 100, {
 					clipBias: 0.003,
 					textureWidth: WIDTH * window.devicePixelRatio,
 					textureHeight: HEIGHT * window.devicePixelRatio,
@@ -98,7 +98,7 @@
 				groundMirror.rotateX( - Math.PI / 2 );
 				scene.add( groundMirror );
 
-				var verticalMirror = new THREE.Mirror( 60, 60, {
+				var verticalMirror = new THREE.Reflector( 60, 60, {
 					clipBias: 0.003,
 					textureWidth: WIDTH * window.devicePixelRatio,
 					textureHeight: HEIGHT * window.devicePixelRatio,

examples/webgl_mirror_nodes.html

@@ -36,8 +36,8 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/objects/Mirror.js"></script>
-		<script src="js/objects/MirrorRTT.js"></script>
+		<script src="js/objects/Reflector.js"></script>
+		<script src="js/objects/ReflectorRTT.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<!-- NodeLibrary -->
@@ -72,7 +72,7 @@
 		<script src="js/nodes/inputs/TextureNode.js"></script>
 		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
 		<script src="js/nodes/inputs/Matrix4Node.js"></script>
-		<script src="js/nodes/inputs/MirrorNode.js"></script>
+		<script src="js/nodes/inputs/ReflectorNode.js"></script>
 
 		<!-- Math -->
 		<script src="js/nodes/math/Math1Node.js"></script>
@@ -152,13 +152,13 @@
 
 				var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
 
-				// MIRROR planes
-				var groundMirror = new THREE.MirrorRTT( 100, 100, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
+				// reflector/mirror plane
+				var groundMirror = new THREE.ReflectorRTT( 100, 100, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
 
 				var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
 				var maskFlip = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
 
-				var mirror = new THREE.MirrorNode( groundMirror );
+				var mirror = new THREE.ReflectorNode( groundMirror );
 
 				var normal = new THREE.TextureNode( decalNormal );
 				var normalXY = new THREE.SwitchNode( normal, 'xy' );

examples/webgl_water.html

@@ -31,7 +31,7 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/objects/Mirror.js"></script>
+		<script src="js/objects/Reflector.js"></script>
 		<script src="js/objects/Refractor.js"></script>
 		<script src="js/objects/Water2.js"></script>
 		<script src="js/Detector.js"></script>

examples/webgl_water_flowmap.html

@@ -31,7 +31,7 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/objects/Mirror.js"></script>
+		<script src="js/objects/Reflector.js"></script>
 		<script src="js/objects/Refractor.js"></script>
 		<script src="js/objects/Water2.js"></script>
 		<script src="js/Detector.js"></script>

examples/webvr_sandbox.html

@@ -19,7 +19,7 @@
 
 		<script src="js/vr/WebVR.js"></script>
 
-		<script src="js/objects/Mirror.js"></script>
+		<script src="js/objects/Reflector.js"></script>
 
 		<script>
 
@@ -33,7 +33,7 @@
 
 			var camera, scene, renderer;
 
-			var mirror;
+			var reflector;
 
 			init();
 			animate();
@@ -93,15 +93,15 @@
 
 				//
 
-				mirror = new THREE.Mirror( 1.4, 1.4, {
+				reflector = new THREE.Reflector( 1.4, 1.4, {
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio
 				} );
-				mirror.position.x = 1;
-				mirror.position.y = 0.5;
-				mirror.position.z = -3;
-				mirror.rotation.y = - Math.PI / 4;
-				scene.add( mirror );
+				reflector.position.x = 1;
+				reflector.position.y = 0.5;
+				reflector.position.z = -3;
+				reflector.rotation.y = - Math.PI / 4;
+				scene.add( reflector );
 
 				var geometry = new THREE.BoxGeometry( 1.5, 1.5, 0.1 );
 				var material = new THREE.MeshStandardMaterial( { roughness: 1.0, metalness: 0.0 } );
@@ -109,7 +109,7 @@
 				mesh.position.z = - 0.07;
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;
-				mirror.add( mesh );
+				reflector.add( mesh );
 
 				//