Add Sprite pivot property

docs/api/objects/Sprite.html

@@ -57,7 +57,12 @@ scene.add( sprite );
 		</div>
 
 
- 		<h2>Methods</h2>
+		<h3>[property:Vector2 pivot]</h3>
+		<div>
+		The origin of the sprite, and the point around which the sprite rotates. The lower-left is (-0.5, -0.5). The upper-right is (0.5, 0.5). The default is (0.0, 0.0), the center of the sprite.
+		</div>
+
+		<h2>Methods</h2>
 		<div>See the base [page:Object3D] class for common methods.</div>
 
 		<h3>[method:Sprite clone]()</h3>

examples/webgl_sprites.html

@@ -119,22 +119,27 @@
 				var height = material.map.image.height;
 
 				spriteTL = new THREE.Sprite( material );
+				spriteTL.pivot.set( - 0.5, 0.5 );
 				spriteTL.scale.set( width, height, 1 );
 				sceneOrtho.add( spriteTL );
 
 				spriteTR = new THREE.Sprite( material );
+				spriteTR.pivot.set( 0.5, 0.5 );
 				spriteTR.scale.set( width, height, 1 );
 				sceneOrtho.add( spriteTR );
 
 				spriteBL = new THREE.Sprite( material );
+				spriteBL.pivot.set( - 0.5, - 0.5 );
 				spriteBL.scale.set( width, height, 1 );
 				sceneOrtho.add( spriteBL );
 
 				spriteBR = new THREE.Sprite( material );
+				spriteBR.pivot.set( 0.5, - 0.5 );
 				spriteBR.scale.set( width, height, 1 );
 				sceneOrtho.add( spriteBR );
 
 				spriteC = new THREE.Sprite( material );
+				spriteC.pivot.set( 0, 0 );
 				spriteC.scale.set( width, height, 1 );
 				sceneOrtho.add( spriteC );
 
@@ -147,16 +152,11 @@
 				var width = window.innerWidth / 2;
 				var height = window.innerHeight / 2;
 
-				var material = spriteTL.material;
-
-				var imageWidth = material.map.image.width / 2;
-				var imageHeight = material.map.image.height / 2;
-
-				spriteTL.position.set( - width + imageWidth,   height - imageHeight, 1 ); // top left
-				spriteTR.position.set(   width - imageWidth,   height - imageHeight, 1 ); // top right
-				spriteBL.position.set( - width + imageWidth, - height + imageHeight, 1 ); // bottom left
-				spriteBR.position.set(   width - imageWidth, - height + imageHeight, 1 ); // bottom right
-				spriteC.position.set( 0, 0, 1 ); // center
+				spriteTL.position.set( - width,   height, 1 ); // top left
+				spriteTR.position.set(   width,   height, 1 ); // top right
+				spriteBL.position.set( - width, - height, 1 ); // bottom left
+				spriteBR.position.set(   width, - height, 1 ); // bottom right
+				spriteC.position.set(        0,        0, 1 ); // center
 
 			}
 

src/objects/Sprite.js

@@ -1,3 +1,4 @@
+import { Vector2 } from '../math/Vector2.js';
 import { Vector3 } from '../math/Vector3.js';
 import { Object3D } from '../core/Object3D.js';
 import { SpriteMaterial } from '../materials/SpriteMaterial.js';
@@ -15,6 +16,8 @@ function Sprite( material ) {
 
 	this.material = ( material !== undefined ) ? material : new SpriteMaterial();
 
+	this.pivot = new Vector2( 0, 0 );
+
 }
 
 Sprite.prototype = Object.assign( Object.create( Object3D.prototype ), {

src/renderers/webgl/WebGLSpriteRenderer.js

@@ -55,6 +55,7 @@ function WebGLSpriteRenderer( renderer, gl, state, textures, capabilities ) {
 			uvScale: gl.getUniformLocation( program, 'uvScale' ),
 
 			rotation: gl.getUniformLocation( program, 'rotation' ),
+			pivot: gl.getUniformLocation( program, 'pivot' ),
 			scale: gl.getUniformLocation( program, 'scale' ),
 
 			color: gl.getUniformLocation( program, 'color' ),
@@ -171,6 +172,7 @@ function WebGLSpriteRenderer( renderer, gl, state, textures, capabilities ) {
 		// render all sprites
 
 		var scale = [];
+		var pivot = [];
 
 		for ( var i = 0, l = sprites.length; i < l; i ++ ) {
 
@@ -189,6 +191,9 @@ function WebGLSpriteRenderer( renderer, gl, state, textures, capabilities ) {
 			scale[ 0 ] = spriteScale.x;
 			scale[ 1 ] = spriteScale.y;
 
+			pivot[ 0 ] = sprite.pivot.x;
+			pivot[ 1 ] = sprite.pivot.y;
+
 			var fogType = 0;
 
 			if ( scene.fog && material.fog ) {
@@ -220,6 +225,7 @@ function WebGLSpriteRenderer( renderer, gl, state, textures, capabilities ) {
 			gl.uniform3f( uniforms.color, material.color.r, material.color.g, material.color.b );
 
 			gl.uniform1f( uniforms.rotation, material.rotation );
+			gl.uniform2fv( uniforms.pivot, pivot );
 			gl.uniform2fv( uniforms.scale, scale );
 
 			state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.premultipliedAlpha );
@@ -259,6 +265,7 @@ function WebGLSpriteRenderer( renderer, gl, state, textures, capabilities ) {
 			'uniform mat4 modelViewMatrix;',
 			'uniform mat4 projectionMatrix;',
 			'uniform float rotation;',
+			'uniform vec2 pivot;',
 			'uniform vec2 scale;',
 			'uniform vec2 uvOffset;',
 			'uniform vec2 uvScale;',
@@ -273,7 +280,7 @@ function WebGLSpriteRenderer( renderer, gl, state, textures, capabilities ) {
 
 			'	vUV = uvOffset + uv * uvScale;',
 
-			'	vec2 alignedPosition = position * scale;',
+			'	vec2 alignedPosition = ( position - pivot ) * scale;',
 
 			'	vec2 rotatedPosition;',
 			'	rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;',