Fixed SVGRenderer's Sprites.

mrdoob · mrdoob · commit e359241996b7 · 2013-11-10T23:40:37.000+09:00
diff --git a/examples/js/renderers/SVGRenderer.js b/examples/js/renderers/SVGRenderer.js
@@ -26,8 +26,8 @@ THREE.SVGRenderer = function () {
 	_w, // z-buffer to w-buffer
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
-	_svgPathPool = [], _svgRectPool = [], _svgLinePool = [],
-	_svgNode, _pathCount, _circleCount, _lineCount,
+	_svgPathPool = [], _svgLinePool = [], _svgRectPool = [],
+	_svgNode, _pathCount = 0, _lineCount = 0, _rectCount = 0,
 	_quality = 1;
 
 	this.domElement = _svg;
@@ -86,8 +86,8 @@ THREE.SVGRenderer = function () {
 	this.clear = function () {
 
 		_pathCount = 0;
-		_circleCount = 0;
 		_lineCount = 0;
+		_rectCount = 0;
 
 		while ( _svg.childNodes.length > 0 ) {
 
@@ -129,7 +129,7 @@ THREE.SVGRenderer = function () {
 			if ( element instanceof THREE.RenderableSprite ) {
 
 				_v1 = element;
-				_v1.x *= _svgWidthHalf; _v1.y *= -_svgHeightHalf;
+				_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
 
 				renderSprite( _v1, element, material );
 
@@ -260,19 +260,15 @@ THREE.SVGRenderer = function () {
 
 	function renderSprite( v1, element, material ) {
 
-		var scaleX = element.object.scale.x;
-		var scaleY = element.object.scale.y;
+		var scaleX = element.scale.x * _svgWidthHalf;
+		var scaleY = element.scale.y * _svgHeightHalf;
 
-		// TODO: Be able to disable this
+		_svgNode = getRectNode( _rectCount ++ );
 
-		scaleX *= element.scale.x * _svgWidthHalf;
-		scaleY *= element.scale.y * _svgHeightHalf;
-
-		_svgNode = getRectNode( _circleCount++ );
-		_svgNode.setAttribute( 'x', v1.x - scaleX );
-		_svgNode.setAttribute( 'y', v1.y - scaleY );
-		_svgNode.setAttribute( 'width', 2 * scaleX );
-		_svgNode.setAttribute( 'height', 2 * scaleY );
+		_svgNode.setAttribute( 'x', v1.x - ( scaleX * 0.5 ) );
+		_svgNode.setAttribute( 'y', v1.y - ( scaleY * 0.5 ) );
+		_svgNode.setAttribute( 'width', scaleX );
+		_svgNode.setAttribute( 'height', scaleY );
 
 		if ( material instanceof THREE.SpriteMaterial ) {
 
@@ -284,7 +280,7 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function renderLine ( v1, v2, element, material ) {
+	function renderLine( v1, v2, element, material ) {
 
 		_svgNode = getLineNode( _lineCount ++ );
 
@@ -412,7 +408,7 @@ THREE.SVGRenderer = function () {
 
 			if ( _quality == 0 ) {
 
-				_svgRectPool[id].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
+				_svgRectPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
 
 			}
 
diff --git a/examples/misc_ubiquity_test.html b/examples/misc_ubiquity_test.html
@@ -148,6 +148,34 @@
 				group.scale.set( 2, 2, 2 );
 				scene.add( group );
 
+				// SPRITES
+
+				var texture = THREE.ImageUtils.loadTexture( 'textures/sprite.png' );
+				var material = new THREE.SpriteMaterial( { map: texture } );
+
+				for ( var i = 0; i < 50; i ++ ) {
+
+					var sprite = new THREE.Sprite( material );
+					sprite.position.x = Math.random() * 1000 - 500;
+					sprite.position.y = Math.random() * 1000 - 500;
+					sprite.position.z = Math.random() * 1000 - 500;
+					sprite.scale.set( 64, 64, 1 );
+					scene.add( sprite );
+
+				}
+
+				for ( var i = 0; i < 50; i ++ ) {
+
+					var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
+					var sprite = new THREE.Sprite( material );
+					sprite.position.x = Math.random() * 1000 - 500;
+					sprite.position.y = Math.random() * 1000 - 500;
+					sprite.position.z = Math.random() * 1000 - 500;
+					sprite.scale.set( 64, 64, 1 );
+					scene.add( sprite );
+
+				}
+
 				// LIGHTS
 
 				var ambient = new THREE.AmbientLight( 0x80ffff );
@@ -209,7 +237,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseY = ( event.clientY - windowHalfY );
