Ver código fonte

Texture rotation: fix transformUV()

WestLangley 8 anos atrás
pai
commit
09ca0ddddc

+ 5 - 0
docs/api/math/Vector2.html

@@ -97,6 +97,11 @@
 		Computes the angle in radians of this vector with respect to the positive x-axis.
 		</div>
 
+		<h3>[method:Vector2 applyMatrix3]( [page:Matrix3 m] )</h3>
+		<div>
+		Multiplies this vector (with an implicit 1 as the 3rd component) by m.
+		</div>
+
 		<h3>[method:Vector2 ceil]()</h3>
 		<div>
 		The [page:.x x] and [page:.y y] components of the vector are rounded up to the nearest integer value.

+ 9 - 0
examples/webgl_raycast_texture.html

@@ -66,6 +66,9 @@
 				Repeat : X <input type="number" value="1" step="0.1" onchange="setRepeatU(this)" />
 				Y <input type="number" value="1" step="0.1" onchange="setRepeatV(this)" />
 			</div>
+			<div class="control">
+				Rotation : <input type="number" value="0" step="0.1" onchange="setRotation(this)" />
+			</div>
 		</fieldset>
 		<script src="../build/three.js"></script>
 		<script>
@@ -373,6 +376,12 @@
 
 			}
 
+			function setRotation( that ) {
+
+				circleTexture.rotation = parseFloat( that.value );
+
+			}
+
 		</script>
 	</body>
 </html>

+ 12 - 0
src/math/Vector2.js

@@ -237,6 +237,18 @@ Object.assign( Vector2.prototype, {
 
 	},
 
+	applyMatrix3: function ( m ) {
+
+		var x = this.x, y = this.y;
+		var e = m.elements;
+
+		this.x = e[ 0 ] * x + e[ 3 ] * y + e[ 6 ];
+		this.y = e[ 1 ] * x + e[ 4 ] * y + e[ 7 ];
+
+		return this;
+
+	},
+
 	min: function ( v ) {
 
 		this.x = Math.min( this.x, v.x );

+ 1 - 2
src/textures/Texture.js

@@ -239,8 +239,7 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
 
 		if ( this.mapping !== UVMapping ) return;
 
-		uv.multiply( this.repeat );
-		uv.add( this.offset ); // todo: support rotation and matrixAutoUpdate flag
+		uv.applyMatrix3( this.matrix );
 
 		if ( uv.x < 0 || uv.x > 1 ) {