Browse Source

Texture rotation: restore rotation property

WestLangley 8 năm trước cách đây
mục cha
commit
5eaed78da0

+ 5 - 5
docs/api/math/Matrix3.html

@@ -175,15 +175,15 @@ m.elements = [ 11, 21, 31,
 			[page:Float rotation], [page:Float cx], [page:Float cy] )
 		</h3>
 		<div>
-		[page:Float tx] - translation x<br />
-		[page:Float ty] - translation y<br />
-		[page:Float sx] - scale x<br />
-		[page:Float sy] - scale y<br />
+		[page:Float tx] - offset x<br />
+		[page:Float ty] - offset y<br />
+		[page:Float sx] - repeat x<br />
+		[page:Float sy] - repeat y<br />
 		[page:Float rotation] - rotation (in radians)<br />
 		[page:Float cx] - center x of rotation<br />
 		[page:Float cy] - center y of rotation<br /><br />
 
-		Sets the UV transform matrix from the texture properties offset (translate), repeat (scale), rotation, and center.
+		Sets the UV transform matrix from offset, repeat, rotation, and center.
 		</div>
 
 		<h3>[method:Array toArray]( [page:Array array], [page:Integer offset] )</h3>

+ 10 - 4
docs/api/textures/Texture.html

@@ -147,17 +147,23 @@
 		assigned to achieve the desired repetiton.
 		</div>
 
+		<h3>[property:number rotation]</h3>
+		<div>
+		How much the texture is rotated around the center point ( 0.5, 0.5 ), in radians. Postive values are counter-clockwise. Default is *0*.
+		</div>
+
 		<h3>[property:boolean matrixAutoUpdate]</h3>
 		<div>
-		Whether to update the texture's uv-transform [property:Matrix3 matrix] based on the [property:Vector2 offset] and
-		[property:Vector2 repeat] settings. True by default.
+		Whether to update the texture's uv-transform [property:Matrix3 matrix] based on the [property:Vector2 offset],
+		[property:Vector2 repeat], and [property:number rotation] settings. True by default.
 		Set this to false if you are specifying the uv-transform matrix directly.
 		</div>
 
 		<h3>[property:Matrix3 matrix]</h3>
 		<div>
-		The uv-transform matrix for the texture. Used instead of [property:Vector2 offset] and [property:Vector2 repeat]
-		when the texture's [property:boolean matrixAutoUpdate] property is false.
+		The uv-transform matrix for the texture. Updated by the renderer from the texture properties [property:Vector2 offset], [property:Vector2 repeat],
+		and [property:number rotation] when the texture's [property:boolean matrixAutoUpdate] property is true.
+		When [property:boolean matrixAutoUpdate] property is false, this matrix may be set manually.
 		Default is the indentity matrix.
 		</div>
 

+ 4 - 5
examples/webgl_materials_texture_rotation.html

@@ -88,7 +88,7 @@
 				var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
-				texture.matrixAutoUpdate = false;
+				texture.matrixAutoUpdate = false; // set this to false to update texture.matrix manually
 
 				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
@@ -129,12 +129,14 @@
 
 					texture.offset.set( API.offsetX, API.offsetY );
 					texture.repeat.set( API.repeatX, API.repeatY );
+					texture.rotation = API.rotation; // rotation is around [ 0.5, 0.5 ]
 
 				} else {
 
+					// one way...
 					//texture.matrix.setUvTransform( API.offsetX, API.offsetY, API.repeatX, API.repeatY, API.rotation, API.centerX, API.centerY );
-					//console.log( texture.matrix.elements );
 
+					// another way...
 					texture.matrix
 					    .identity()
 					    .translate( - API.centerX, - API.centerY )
@@ -143,9 +145,6 @@
 					    .translate( API.centerX, API.centerY )
 					    .translate( API.offsetX, API.offsetY );
 
-					//console.log( texture.matrix.elements );
-					//console.log( '-------------')
-
 				}
 
 				render();

+ 4 - 2
src/renderers/WebGLRenderer.js

@@ -1986,7 +1986,8 @@ function WebGLRenderer( parameters ) {
 
 			    var offset = uvScaleMap.offset;
 			    var repeat = uvScaleMap.repeat;
-			    uvScaleMap.matrix.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, 0, 0, 0 );
+			    var rotation = uvScaleMap.rotation;
+			    uvScaleMap.matrix.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, rotation, 0.5, 0.5 );
 
 			}
 
@@ -2026,7 +2027,8 @@ function WebGLRenderer( parameters ) {
 
 			    var offset = material.map.offset;
 			    var repeat = material.map.repeat;
-			    material.map.matrix.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, 0, 0, 0 );
+			    var rotation = material.map.rotation;
+			    material.map.matrix.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, rotation, 0.5, 0.5 );
 
 			}
 

+ 4 - 1
src/textures/Texture.js

@@ -39,6 +39,7 @@ function Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, ty
 
 	this.offset = new Vector2( 0, 0 );
 	this.repeat = new Vector2( 1, 1 );
+	this.rotation = 0;
 
 	this.matrixAutoUpdate = true;
 	this.matrix = new Matrix3();
@@ -106,6 +107,7 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
 
 		this.offset.copy( source.offset );
 		this.repeat.copy( source.repeat );
+		this.rotation = source.rotation;
 
 		this.matrixAutoUpdate = source.matrixAutoUpdate;
 		this.matrix.copy( source.matrix );
@@ -182,6 +184,7 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
 
 			repeat: [ this.repeat.x, this.repeat.y ],
 			offset: [ this.offset.x, this.offset.y ],
+			rotation: this.rotation,
 
 			matrixAutoUpdate: this.matrixAutoUpdate,
 			matrix: this.matrix.toArray(),
@@ -237,7 +240,7 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
 		if ( this.mapping !== UVMapping ) return;
 
 		uv.multiply( this.repeat );
-		uv.add( this.offset );
+		uv.add( this.offset ); // todo: support rotation and matrixAutoUpdate flag
 
 		if ( uv.x < 0 || uv.x > 1 ) {