首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Texture rotation: new API

WestLangley 8 年之前
父节点
529a142ef8
当前提交
d1e4631659
共有 5 个文件被更改，包括 54 次插入 和 39 次删除
合并视图 显示文件统计
  1. 1 1
      docs/api/math/Matrix3.html
  2. 8 5
      docs/api/textures/Texture.html
  3. 12 17
      examples/webgl_materials_texture_rotation.html
  4. 22 10
      src/renderers/WebGLRenderer.js
  5. 11 6
      src/textures/Texture.js

+ 1 - 1
docs/api/math/Matrix3.html
查看文件 

@@ -1,4 +1,4 @@
 
-	<!DOCTYPE html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8" />
 
 		<meta charset="utf-8" />

+ 8 - 5
docs/api/textures/Texture.html
查看文件 

@@ -147,15 +147,18 @@
 
 		assigned to achieve the desired repetiton.

 		assigned to achieve the desired repetiton.

 		</div>

 		</div>

 

 

-		<h3>[property:number rotation]</h3>

+		<h3>[property:boolean matrixAutoUpdate]</h3>

 		<div>

 		<div>

-		How much the texture is rotated, in radians. Postive values are counter-clockwise. Default is *0*.

+		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.

+		Set this to false if you are specifying the uv-transform matrix directly.

 		</div>

 		</div>

 

 

-		<h3>[property:Vector2 center]</h3>

+		<h3>[property:Matrix3 matrix]</h3>

 		<div>

 		<div>

-		The center point of the texture -- used for both rotation and scaling. The range for each component is *0.0* to *1.0*. The default is [ *0*, *0* ],

-		which corresponds to the lower-left corner of the texture.

+		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.

+		Default is the indentity matrix.

 		</div>

 		</div>

 

 

 		<h3>[property:boolean generateMipmaps]</h3>

 		<h3>[property:boolean generateMipmaps]</h3>

+ 12 - 17
examples/webgl_materials_texture_rotation.html
查看文件 

@@ -87,13 +87,14 @@
 
 				var loader = new THREE.TextureLoader();
 
 				var loader = new THREE.TextureLoader();
 
 				var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );
 
 				var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );
 
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
+				texture.matrixAutoUpdate = false;
 
 
 
 				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
 				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
 
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
 				scene.add( mesh );
 
 
 
-				updateTextureParams();
 
+				updateUvTransform();
 
 
 
 				initGui();
 
 				initGui();
 
 
 
@@ -119,17 +120,11 @@
 
 
 
 			}
 
 			}
 
 
 
-			function updateTextureParams() {
 
+			function updateUvTransform() {
 
 
 
-				var map = mesh.material.map;
 
+				var matrix = mesh.material.map.matrix;
 
 
 
-				map.offset.x = API.translateX;
 
-				map.offset.y = API.translateY;
 
-				map.repeat.x = API.scaleX;
 
-				map.repeat.y = API.scaleY;
 
-				map.rotation = API.rotation;
 
-				map.center.x = API.centerX;
 
-				map.center.y = API.centerY;
 
+				matrix.setUvTransform( API.translateX, API.translateY, API.scaleX, API.scaleY, API.rotation, API.centerX, API.centerY );
 
 
 
 				render();
 
 				render();
 
 
 
@@ -141,13 +136,13 @@
 
 
 
 				gui = new dat.GUI();
 
 				gui = new dat.GUI();
 
 
 
-				gui.add( API, 'translateX', 0.0, 1.0 ).name( 'offset.x' ).onChange( updateTextureParams );
 
-				gui.add( API, 'translateY', 0.0, 1.0 ).name( 'offset.y' ).onChange( updateTextureParams );
 
-				gui.add( API, 'scaleX', 0.25, 2.0 ).name( 'repeat.x' ).onChange( updateTextureParams );
 
-				gui.add( API, 'scaleY', 0.25, 2.0 ).name( 'repeat.y' ).onChange( updateTextureParams );
 
-				gui.add( API, 'rotation', - 2.0, 2.0 ).name( 'rotation' ).onChange( updateTextureParams );
 
-				gui.add( API, 'centerX', 0.0, 1.0 ).name( 'center.x' ).onChange( updateTextureParams );
 
-				gui.add( API, 'centerY', 0.0, 1.0 ).name( 'center.y' ).onChange( updateTextureParams );
 
+				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, '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 );
 
 
 
 			}
 
 			}

+ 22 - 10
src/renderers/WebGLRenderer.js
查看文件 

@@ -1982,12 +1982,18 @@ function WebGLRenderer( parameters ) {
 
 
 
 			}
 
 			}
 
 
 
-			var offset = uvScaleMap.offset;
 
-			var repeat = uvScaleMap.repeat;
 
-			var rotation = uvScaleMap.rotation;
 
-			var center = uvScaleMap.center;
 
+			if ( uvScaleMap.matrixAutoUpdate === true ) {
 
 
 
-			uniforms.uvTransform.value.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, rotation, center.x, center.y );
 
+				var offset = uvScaleMap.offset;
 
+				var repeat = uvScaleMap.repeat;
 
+
 
+				uniforms.uvTransform.value.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, 0, 0, 0 );
 
+
 
+			} else {
 
+
 
+				uniforms.uvTransform.value.copy( uvScaleMap.matrix );
 
+
 
+			}
 
 
 
 		}
 
 		}
 
 
 
@@ -2019,12 +2025,18 @@ function WebGLRenderer( parameters ) {
 
 
 
 		if ( material.map !== null ) {
 
 		if ( material.map !== null ) {
 
 
 
-			var offset = material.map.offset;
 
-			var repeat = material.map.repeat;
 
-			var rotation = material.map.rotation;
 
-			var center = material.map.center;
 
+			if ( material.map.matrixAutoUpdate === true ) {
 
 
 
-			uniforms.uvTransform.value.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, rotation, center.x, center.y );
 
+				var offset = material.map.offset;
 
+				var repeat = material.map.repeat;
 
+
 
+				uniforms.uvTransform.value.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, 0, 0, 0 );
 
+
 
+			} else {
 
+
 
+				uniforms.uvTransform.value.copy( material.map.matrix );
 
+
 
+			}
 
 
 
 		}
 
 		}

+ 11 - 6
src/textures/Texture.js
查看文件 

@@ -3,6 +3,7 @@ import { UVMapping } from '../constants';
 
 import { MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, LinearEncoding, UnsignedByteType, RGBAFormat, LinearMipMapLinearFilter, LinearFilter } from '../constants';
 
 import { MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, LinearEncoding, UnsignedByteType, RGBAFormat, LinearMipMapLinearFilter, LinearFilter } from '../constants';
 
 import { _Math } from '../math/Math';
 
 import { _Math } from '../math/Math';
 
 import { Vector2 } from '../math/Vector2';
 
 import { Vector2 } from '../math/Vector2';
 
+import { Matrix3 } from '../math/Matrix3';
 
 
 
 /**
 
 /**
 
  * @author mrdoob / http://mrdoob.com/
 
  * @author mrdoob / http://mrdoob.com/
 
@@ -38,8 +39,9 @@ function Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, ty
 
 
 
 	this.offset = new Vector2( 0, 0 );
 
 	this.offset = new Vector2( 0, 0 );
 
 	this.repeat = new Vector2( 1, 1 );
 
 	this.repeat = new Vector2( 1, 1 );
 
-	this.rotation = 0;
 
-	this.center = new Vector2( 0, 0 );
 
+
 
+	this.matrixAutoUpdate = true;
 
+	this.matrix = new Matrix3();
 
 
 
 	this.generateMipmaps = true;
 
 	this.generateMipmaps = true;
 
 	this.premultiplyAlpha = false;
 
 	this.premultiplyAlpha = false;
 
@@ -104,8 +106,9 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
 
 
 
 		this.offset.copy( source.offset );
 
 		this.offset.copy( source.offset );
 
 		this.repeat.copy( source.repeat );
 
 		this.repeat.copy( source.repeat );
 
-		this.rotation = source.rotation;
 
-		this.center.copy( source.center );
 
+
 
+		this.matrixAutoUpdate = source.matrixAutoUpdate;
 
+		this.matrix.copy( source.matrix );
 
 
 
 		this.generateMipmaps = source.generateMipmaps;
 
 		this.generateMipmaps = source.generateMipmaps;
 
 		this.premultiplyAlpha = source.premultiplyAlpha;
 
 		this.premultiplyAlpha = source.premultiplyAlpha;
 
@@ -179,8 +182,10 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
 
 
 
 			repeat: [ this.repeat.x, this.repeat.y ],
 
 			repeat: [ this.repeat.x, this.repeat.y ],
 
 			offset: [ this.offset.x, this.offset.y ],
 
 			offset: [ this.offset.x, this.offset.y ],
 
-			rotation: this.rotation,
 
-			center: [ this.center.x, this.center.y ],
 
+
 
+			matrixAutoUpdate: this.matrixAutoUpdate,
 
+			matrix: this.matrix.toArray(),
 
+
 
 			wrap: [ this.wrapS, this.wrapT ],
 
 			wrap: [ this.wrapS, this.wrapT ],
 
 
 
 			minFilter: this.minFilter,
 
 			minFilter: this.minFilter,