Texture rotation: a different API

examples/webgl_materials_texture_rotation.html

@@ -50,10 +50,10 @@
 			var gui;
 
 			var API = {
-				translateX: 0,
-				translateY: 0,
-				scaleX: 0.25,
-				scaleY: 0.25,
+				offsetX: 0,
+				offsetY: 0,
+				repeatX: 0.25,
+				repeatY: 0.25,
 				rotation: Math.PI / 4, // positive is counter-clockwise
 				centerX: 0.5,
 				centerY: 0.5
@@ -87,6 +87,7 @@
 				var loader = new THREE.TextureLoader();
 				var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+
 				texture.matrixAutoUpdate = false;
 
 				var material = new THREE.MeshBasicMaterial( { map: texture } );
@@ -122,9 +123,30 @@
 
 			function updateUvTransform() {
 
-				var matrix = mesh.material.map.matrix;
+				var texture = mesh.material.map;
+
+				if ( texture.matrixAutoUpdate === true ) {
+
+					texture.offset.set( API.offsetX, API.offsetY );
+					texture.repeat.set( API.repeatX, API.repeatY );
+
+				} else {
+
+					//texture.matrix.setUvTransform( API.offsetX, API.offsetY, API.repeatX, API.repeatY, API.rotation, API.centerX, API.centerY );
+					//console.log( texture.matrix.elements );
+
+					texture.matrix
+					    .identity()
+					    .translate( - API.centerX, - API.centerY )
+					    .rotate( API.rotation )					// I don't understand how rotation can preceed scale, but it seems to be required...
+					    .scale( API.repeatX, API.repeatY )
+					    .translate( API.centerX, API.centerY )
+					    .translate( API.offsetX, API.offsetY );
+
+					//console.log( texture.matrix.elements );
+					//console.log( '-------------')
 
-				matrix.setUvTransform( API.translateX, API.translateY, API.scaleX, API.scaleY, API.rotation, API.centerX, API.centerY );
+				}
 
 				render();
 
@@ -136,10 +158,10 @@
 
 				gui = new dat.GUI();
 
-				gui.add( API, 'translateX', 0.0, 1.0 ).name( 'offset.x' ).onChange( updateUvTransform );
-				gui.add( API, 'translateY', 0.0, 1.0 ).name( 'offset.y' ).onChange( updateUvTransform );
-				gui.add( API, 'scaleX', 0.25, 2.0 ).name( 'repeat.x' ).onChange( updateUvTransform );
-				gui.add( API, 'scaleY', 0.25, 2.0 ).name( 'repeat.y' ).onChange( updateUvTransform );
+				gui.add( API, 'offsetX', 0.0, 1.0 ).name( 'offset.x' ).onChange( updateUvTransform );
+				gui.add( API, 'offsetY', 0.0, 1.0 ).name( 'offset.y' ).onChange( updateUvTransform );
+				gui.add( API, 'repeatX', 0.25, 2.0 ).name( 'repeat.x' ).onChange( updateUvTransform );
+				gui.add( API, 'repeatY', 0.25, 2.0 ).name( 'repeat.y' ).onChange( updateUvTransform );
 				gui.add( API, 'rotation', - 2.0, 2.0 ).name( 'rotation' ).onChange( updateUvTransform );
 				gui.add( API, 'centerX', 0.0, 1.0 ).name( 'center.x' ).onChange( updateUvTransform );
 				gui.add( API, 'centerY', 0.0, 1.0 ).name( 'center.y' ).onChange( updateUvTransform );

src/math/Matrix3.js

@@ -281,11 +281,55 @@ Object.assign( Matrix3.prototype, {
 		this.set(
 			sx * c, sx * s, - sx * ( c * cx + s * cy ) + cx + tx,
 			- sy * s, sy * c, - sy * ( - s * cx + c * cy ) + cy + ty,
-			0, 0, 0
+			0, 0, 1
 		);
 
 	},
 
+	scale: function ( sx, sy ) {
+
+		var te = this.elements;
+
+		te[ 0 ] *= sx; te[ 3 ] *= sx; te[ 6 ] *= sx;
+		te[ 1 ] *= sy; te[ 4 ] *= sy; te[ 7 ] *= sy;
+
+		return this;
+
+	},
+
+	rotate: function ( theta ) {
+
+		var c = Math.cos( theta );
+		var s = Math.sin( theta );
+
+		var te = this.elements;
+
+		var a11 = te[ 0 ], a12 = te[ 3 ], a13 = te[ 6 ];
+		var a21 = te[ 1 ], a22 = te[ 4 ], a23 = te[ 7 ];
+
+		te[ 0 ] = c * a11 + s * a21;
+		te[ 3 ] = c * a12 + s * a22;
+		te[ 6 ] = c * a13 + s * a23;
+
+		te[ 1 ] = - s * a11 + c * a21;
+		te[ 4 ] = - s * a12 + c * a22;
+		te[ 7 ] = - s * a13 + c * a23;
+
+		return this;
+
+	},
+
+	translate: function ( tx, ty ) {
+
+		var te = this.elements;
+
+		te[ 0 ] += tx * te[ 2 ]; te[ 3 ] += tx * te[ 5 ]; te[ 6 ] += tx * te[ 8 ];
+		te[ 1 ] += ty * te[ 2 ]; te[ 4 ] += ty * te[ 5 ]; te[ 7 ] += ty * te[ 8 ];
+
+		return this;
+
+	},
+
 	equals: function ( matrix ) {
 
 		var te = this.elements;