@needle-tools/three 0.160.3 → 0.162.1

package/examples/jsm/renderers/SVGRenderer.js

@@ -1,556 +1,556 @@
-import {
-	Box2,
-	Camera,
-	Color,
-	Matrix3,
-	Matrix4,
-	Object3D,
-	SRGBColorSpace,
-	Vector3
-} from 'three';
-import { Projector } from '../renderers/Projector.js';
-import { RenderableFace } from '../renderers/Projector.js';
-import { RenderableLine } from '../renderers/Projector.js';
-import { RenderableSprite } from '../renderers/Projector.js';
-
-class SVGObject extends Object3D {
-
-	constructor( node ) {
-
-		super();
-
-		this.isSVGObject = true;
-
-		this.node = node;
-
-	}
-
-}
-
-class SVGRenderer {
-
-	constructor() {
-
-		let _renderData, _elements, _lights,
-			_svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf,
-
-			_v1, _v2, _v3,
-
-			_svgNode,
-			_pathCount = 0,
-
-			_precision = null,
-			_quality = 1,
-
-			_currentPath, _currentStyle;
-
-		const _this = this,
-			_clipBox = new Box2(),
-			_elemBox = new Box2(),
-
-			_color = new Color(),
-			_diffuseColor = new Color(),
-			_ambientLight = new Color(),
-			_directionalLights = new Color(),
-			_pointLights = new Color(),
-			_clearColor = new Color(),
-
-			_vector3 = new Vector3(), // Needed for PointLight
-			_centroid = new Vector3(),
-			_normal = new Vector3(),
-			_normalViewMatrix = new Matrix3(),
-
-			_viewMatrix = new Matrix4(),
-			_viewProjectionMatrix = new Matrix4(),
-
-			_svgPathPool = [],
-
-			_projector = new Projector(),
-			_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
-
-		this.domElement = _svg;
-
-		this.autoClear = true;
-		this.sortObjects = true;
-		this.sortElements = true;
-
-		this.overdraw = 0.5;
-
-		this.outputColorSpace = SRGBColorSpace;
-
-		this.info = {
-
-			render: {
-
-				vertices: 0,
-				faces: 0
-
-			}
-
-		};
-
-		this.setQuality = function ( quality ) {
-
-			switch ( quality ) {
-
-				case 'high': _quality = 1; break;
-				case 'low': _quality = 0; break;
-
-			}
-
-		};
-
-		this.setClearColor = function ( color ) {
-
-			_clearColor.set( color );
-
-		};
-
-		this.setPixelRatio = function () {};
-
-		this.setSize = function ( width, height ) {
-
-			_svgWidth = width; _svgHeight = height;
-			_svgWidthHalf = _svgWidth / 2; _svgHeightHalf = _svgHeight / 2;
-
-			_svg.setAttribute( 'viewBox', ( - _svgWidthHalf ) + ' ' + ( - _svgHeightHalf ) + ' ' + _svgWidth + ' ' + _svgHeight );
-			_svg.setAttribute( 'width', _svgWidth );
-			_svg.setAttribute( 'height', _svgHeight );
-
-			_clipBox.min.set( - _svgWidthHalf, - _svgHeightHalf );
-			_clipBox.max.set( _svgWidthHalf, _svgHeightHalf );
-
-		};
-
-		this.getSize = function () {
-
-			return {
-				width: _svgWidth,
-				height: _svgHeight
-			};
-
-		};
-
-		this.setPrecision = function ( precision ) {
-
-			_precision = precision;
-
-		};
-
-		function removeChildNodes() {
-
-			_pathCount = 0;
-
-			while ( _svg.childNodes.length > 0 ) {
-
-				_svg.removeChild( _svg.childNodes[ 0 ] );
-
-			}
-
-		}
-
-		function convert( c ) {
-
-			return _precision !== null ? c.toFixed( _precision ) : c;
-
-		}
-
-		this.clear = function () {
-
-			removeChildNodes();
-			_svg.style.backgroundColor = _clearColor.getStyle( _this.outputColorSpace );
-
-		};
-
-		this.render = function ( scene, camera ) {
-
-			if ( camera instanceof Camera === false ) {
-
-				console.error( 'THREE.SVGRenderer.render: camera is not an instance of Camera.' );
-				return;
-
-			}
-
-			const background = scene.background;
-
-			if ( background && background.isColor ) {
-
-				removeChildNodes();
-				_svg.style.backgroundColor = background.getStyle( _this.outputColorSpace );
-
-			} else if ( this.autoClear === true ) {
-
-				this.clear();
-
-			}
-
-			_this.info.render.vertices = 0;
-			_this.info.render.faces = 0;
-
-			_viewMatrix.copy( camera.matrixWorldInverse );
-			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
-
-			_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
-			_elements = _renderData.elements;
-			_lights = _renderData.lights;
-
-			_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
-
-			calculateLights( _lights );
-
-			 // reset accumulated path
-
-			_currentPath = '';
-			_currentStyle = '';
-
-			for ( let e = 0, el = _elements.length; e < el; e ++ ) {
-
-				const element = _elements[ e ];
-				const material = element.material;
-
-				if ( material === undefined || material.opacity === 0 ) continue;
-
-				_elemBox.makeEmpty();
-
-				if ( element instanceof RenderableSprite ) {
-
-					_v1 = element;
-					_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
-
-					renderSprite( _v1, element, material );
-
-				} else if ( element instanceof RenderableLine ) {
-
-					_v1 = element.v1; _v2 = element.v2;
-
-					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
-					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
-
-					_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
-
-					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
-
-						renderLine( _v1, _v2, material );
-
-					}
-
-				} else if ( element instanceof RenderableFace ) {
-
-					_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
-
-					if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
-					if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
-					if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
-
-					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
-					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
-					_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
-
-					if ( this.overdraw > 0 ) {
-
-						expand( _v1.positionScreen, _v2.positionScreen, this.overdraw );
-						expand( _v2.positionScreen, _v3.positionScreen, this.overdraw );
-						expand( _v3.positionScreen, _v1.positionScreen, this.overdraw );
-
-					}
-
-					_elemBox.setFromPoints( [
-						_v1.positionScreen,
-						_v2.positionScreen,
-						_v3.positionScreen
-					] );
-
-					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
-
-						renderFace3( _v1, _v2, _v3, element, material );
-
-					}
-
-				}
-
-			}
-
-			flushPath(); // just to flush last svg:path
-
-			scene.traverseVisible( function ( object ) {
-
-				 if ( object.isSVGObject ) {
-
-					_vector3.setFromMatrixPosition( object.matrixWorld );
-					_vector3.applyMatrix4( _viewProjectionMatrix );
-
-					if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
-
-					const x = _vector3.x * _svgWidthHalf;
-					const y = - _vector3.y * _svgHeightHalf;
-
-					const node = object.node;
-					node.setAttribute( 'transform', 'translate(' + x + ',' + y + ')' );
-
-					_svg.appendChild( node );
-
-				}
-
-			} );
-
-		};
-
-		function calculateLights( lights ) {
-
-			_ambientLight.setRGB( 0, 0, 0 );
-			_directionalLights.setRGB( 0, 0, 0 );
-			_pointLights.setRGB( 0, 0, 0 );
-
-			for ( let l = 0, ll = lights.length; l < ll; l ++ ) {
-
-				const light = lights[ l ];
-				const lightColor = light.color;
-
-				if ( light.isAmbientLight ) {
-
-					_ambientLight.r += lightColor.r;
-					_ambientLight.g += lightColor.g;
-					_ambientLight.b += lightColor.b;
-
-				} else if ( light.isDirectionalLight ) {
-
-					_directionalLights.r += lightColor.r;
-					_directionalLights.g += lightColor.g;
-					_directionalLights.b += lightColor.b;
-
-				} else if ( light.isPointLight ) {
-
-					_pointLights.r += lightColor.r;
-					_pointLights.g += lightColor.g;
-					_pointLights.b += lightColor.b;
-
-				}
-
-			}
-
-		}
-
-		function calculateLight( lights, position, normal, color ) {
-
-			for ( let l = 0, ll = lights.length; l < ll; l ++ ) {
-
-				const light = lights[ l ];
-				const lightColor = light.color;
-
-				if ( light.isDirectionalLight ) {
-
-					const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
-
-					let amount = normal.dot( lightPosition );
-
-					if ( amount <= 0 ) continue;
-
-					amount *= light.intensity;
-
-					color.r += lightColor.r * amount;
-					color.g += lightColor.g * amount;
-					color.b += lightColor.b * amount;
-
-				} else if ( light.isPointLight ) {
-
-					const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
-
-					let amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
-
-					if ( amount <= 0 ) continue;
-
-					amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
-
-					if ( amount == 0 ) continue;
-
-					amount *= light.intensity;
-
-					color.r += lightColor.r * amount;
-					color.g += lightColor.g * amount;
-					color.b += lightColor.b * amount;
-
-				}
-
-			}
-
-		}
-
-		function renderSprite( v1, element, material ) {
-
-			let scaleX = element.scale.x * _svgWidthHalf;
-			let scaleY = element.scale.y * _svgHeightHalf;
-
-			if ( material.isPointsMaterial ) {
-
-				scaleX *= material.size;
-				scaleY *= material.size;
-
-			}
-
-			const path = 'M' + convert( v1.x - scaleX * 0.5 ) + ',' + convert( v1.y - scaleY * 0.5 ) + 'h' + convert( scaleX ) + 'v' + convert( scaleY ) + 'h' + convert( - scaleX ) + 'z';
-			let style = '';
-
-			if ( material.isSpriteMaterial || material.isPointsMaterial ) {
-
-				style = 'fill:' + material.color.getStyle( _this.outputColorSpace ) + ';fill-opacity:' + material.opacity;
-
-			}
-
-			addPath( style, path );
-
-		}
-
-		function renderLine( v1, v2, material ) {
-
-			const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y );
-
-			if ( material.isLineBasicMaterial ) {
-
-				let style = 'fill:none;stroke:' + material.color.getStyle( _this.outputColorSpace ) + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
-
-				if ( material.isLineDashedMaterial ) {
-
-					style = style + ';stroke-dasharray:' + material.dashSize + ',' + material.gapSize;
-
-				}
-
-				addPath( style, path );
-
-			}
-
-		}
-
-		function renderFace3( v1, v2, v3, element, material ) {
-
-			_this.info.render.vertices += 3;
-			_this.info.render.faces ++;
-
-			const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y ) + 'L' + convert( v3.positionScreen.x ) + ',' + convert( v3.positionScreen.y ) + 'z';
-			let style = '';
-
-			if ( material.isMeshBasicMaterial ) {
-
-				_color.copy( material.color );
-
-				if ( material.vertexColors ) {
-
-					_color.multiply( element.color );
-
-				}
-
-			} else if ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
-
-				_diffuseColor.copy( material.color );
-
-				if ( material.vertexColors ) {
-
-					_diffuseColor.multiply( element.color );
-
-				}
-
-				_color.copy( _ambientLight );
-
-				_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
-
-				calculateLight( _lights, _centroid, element.normalModel, _color );
-
-				_color.multiply( _diffuseColor ).add( material.emissive );
-
-			} else if ( material.isMeshNormalMaterial ) {
-
-				_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix ).normalize();
-
-				_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
-
-			}
-
-			if ( material.wireframe ) {
-
-				style = 'fill:none;stroke:' + _color.getStyle( _this.outputColorSpace ) + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
-
-			} else {
-
-				style = 'fill:' + _color.getStyle( _this.outputColorSpace ) + ';fill-opacity:' + material.opacity;
-
-			}
-
-			addPath( style, path );
-
-		}
-
-		// Hide anti-alias gaps
-
-		function expand( v1, v2, pixels ) {
-
-			let x = v2.x - v1.x, y = v2.y - v1.y;
-			const det = x * x + y * y;
-
-			if ( det === 0 ) return;
-
-			const idet = pixels / Math.sqrt( det );
-
-			x *= idet; y *= idet;
-
-			v2.x += x; v2.y += y;
-			v1.x -= x; v1.y -= y;
-
-		}
-
-		function addPath( style, path ) {
-
-			if ( _currentStyle === style ) {
-
-				_currentPath += path;
-
-			} else {
-
-				flushPath();
-
-				_currentStyle = style;
-				_currentPath = path;
-
-			}
-
-		}
-
-		function flushPath() {
-
-			if ( _currentPath ) {
-
-				_svgNode = getPathNode( _pathCount ++ );
-				_svgNode.setAttribute( 'd', _currentPath );
-				_svgNode.setAttribute( 'style', _currentStyle );
-				_svg.appendChild( _svgNode );
-
-			}
-
-			_currentPath = '';
-			_currentStyle = '';
-
-		}
-
-		function getPathNode( id ) {
-
-			if ( _svgPathPool[ id ] == null ) {
-
-				_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
-
-				if ( _quality == 0 ) {
-
-					_svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
-
-				}
-
-				return _svgPathPool[ id ];
-
-			}
-
-			return _svgPathPool[ id ];
-
-		}
-
-	}
-
-}
-
-export { SVGObject, SVGRenderer };
+import {
+	Box2,
+	Camera,
+	Color,
+	Matrix3,
+	Matrix4,
+	Object3D,
+	SRGBColorSpace,
+	Vector3
+} from 'three';
+import { Projector } from '../renderers/Projector.js';
+import { RenderableFace } from '../renderers/Projector.js';
+import { RenderableLine } from '../renderers/Projector.js';
+import { RenderableSprite } from '../renderers/Projector.js';
+
+class SVGObject extends Object3D {
+
+	constructor( node ) {
+
+		super();
+
+		this.isSVGObject = true;
+
+		this.node = node;
+
+	}
+
+}
+
+class SVGRenderer {
+
+	constructor() {
+
+		let _renderData, _elements, _lights,
+			_svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf,
+
+			_v1, _v2, _v3,
+
+			_svgNode,
+			_pathCount = 0,
+
+			_precision = null,
+			_quality = 1,
+
+			_currentPath, _currentStyle;
+
+		const _this = this,
+			_clipBox = new Box2(),
+			_elemBox = new Box2(),
+
+			_color = new Color(),
+			_diffuseColor = new Color(),
+			_ambientLight = new Color(),
+			_directionalLights = new Color(),
+			_pointLights = new Color(),
+			_clearColor = new Color(),
+
+			_vector3 = new Vector3(), // Needed for PointLight
+			_centroid = new Vector3(),
+			_normal = new Vector3(),
+			_normalViewMatrix = new Matrix3(),
+
+			_viewMatrix = new Matrix4(),
+			_viewProjectionMatrix = new Matrix4(),
+
+			_svgPathPool = [],
+
+			_projector = new Projector(),
+			_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+
+		this.domElement = _svg;
+
+		this.autoClear = true;
+		this.sortObjects = true;
+		this.sortElements = true;
+
+		this.overdraw = 0.5;
+
+		this.outputColorSpace = SRGBColorSpace;
+
+		this.info = {
+
+			render: {
+
+				vertices: 0,
+				faces: 0
+
+			}
+
+		};
+
+		this.setQuality = function ( quality ) {
+
+			switch ( quality ) {
+
+				case 'high': _quality = 1; break;
+				case 'low': _quality = 0; break;
+
+			}
+
+		};
+
+		this.setClearColor = function ( color ) {
+
+			_clearColor.set( color );
+
+		};
+
+		this.setPixelRatio = function () {};
+
+		this.setSize = function ( width, height ) {
+
+			_svgWidth = width; _svgHeight = height;
+			_svgWidthHalf = _svgWidth / 2; _svgHeightHalf = _svgHeight / 2;
+
+			_svg.setAttribute( 'viewBox', ( - _svgWidthHalf ) + ' ' + ( - _svgHeightHalf ) + ' ' + _svgWidth + ' ' + _svgHeight );
+			_svg.setAttribute( 'width', _svgWidth );
+			_svg.setAttribute( 'height', _svgHeight );
+
+			_clipBox.min.set( - _svgWidthHalf, - _svgHeightHalf );
+			_clipBox.max.set( _svgWidthHalf, _svgHeightHalf );
+
+		};
+
+		this.getSize = function () {
+
+			return {
+				width: _svgWidth,
+				height: _svgHeight
+			};
+
+		};
+
+		this.setPrecision = function ( precision ) {
+
+			_precision = precision;
+
+		};
+
+		function removeChildNodes() {
+
+			_pathCount = 0;
+
+			while ( _svg.childNodes.length > 0 ) {
+
+				_svg.removeChild( _svg.childNodes[ 0 ] );
+
+			}
+
+		}
+
+		function convert( c ) {
+
+			return _precision !== null ? c.toFixed( _precision ) : c;
+
+		}
+
+		this.clear = function () {
+
+			removeChildNodes();
+			_svg.style.backgroundColor = _clearColor.getStyle( _this.outputColorSpace );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( camera instanceof Camera === false ) {
+
+				console.error( 'THREE.SVGRenderer.render: camera is not an instance of Camera.' );
+				return;
+
+			}
+
+			const background = scene.background;
+
+			if ( background && background.isColor ) {
+
+				removeChildNodes();
+				_svg.style.backgroundColor = background.getStyle( _this.outputColorSpace );
+
+			} else if ( this.autoClear === true ) {
+
+				this.clear();
+
+			}
+
+			_this.info.render.vertices = 0;
+			_this.info.render.faces = 0;
+
+			_viewMatrix.copy( camera.matrixWorldInverse );
+			_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
+
+			_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
+			_elements = _renderData.elements;
+			_lights = _renderData.lights;
+
+			_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
+
+			calculateLights( _lights );
+
+			 // reset accumulated path
+
+			_currentPath = '';
+			_currentStyle = '';
+
+			for ( let e = 0, el = _elements.length; e < el; e ++ ) {
+
+				const element = _elements[ e ];
+				const material = element.material;
+
+				if ( material === undefined || material.opacity === 0 ) continue;
+
+				_elemBox.makeEmpty();
+
+				if ( element instanceof RenderableSprite ) {
+
+					_v1 = element;
+					_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
+
+					renderSprite( _v1, element, material );
+
+				} else if ( element instanceof RenderableLine ) {
+
+					_v1 = element.v1; _v2 = element.v2;
+
+					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+
+					_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
+
+					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+						renderLine( _v1, _v2, material );
+
+					}
+
+				} else if ( element instanceof RenderableFace ) {
+
+					_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
+
+					if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
+					if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
+					if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
+
+					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+					_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
+
+					if ( this.overdraw > 0 ) {
+
+						expand( _v1.positionScreen, _v2.positionScreen, this.overdraw );
+						expand( _v2.positionScreen, _v3.positionScreen, this.overdraw );
+						expand( _v3.positionScreen, _v1.positionScreen, this.overdraw );
+
+					}
+
+					_elemBox.setFromPoints( [
+						_v1.positionScreen,
+						_v2.positionScreen,
+						_v3.positionScreen
+					] );
+
+					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+						renderFace3( _v1, _v2, _v3, element, material );
+
+					}
+
+				}
+
+			}
+
+			flushPath(); // just to flush last svg:path
+
+			scene.traverseVisible( function ( object ) {
+
+				 if ( object.isSVGObject ) {
+
+					_vector3.setFromMatrixPosition( object.matrixWorld );
+					_vector3.applyMatrix4( _viewProjectionMatrix );
+
+					if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
+
+					const x = _vector3.x * _svgWidthHalf;
+					const y = - _vector3.y * _svgHeightHalf;
+
+					const node = object.node;
+					node.setAttribute( 'transform', 'translate(' + x + ',' + y + ')' );
+
+					_svg.appendChild( node );
+
+				}
+
+			} );
+
+		};
+
+		function calculateLights( lights ) {
+
+			_ambientLight.setRGB( 0, 0, 0 );
+			_directionalLights.setRGB( 0, 0, 0 );
+			_pointLights.setRGB( 0, 0, 0 );
+
+			for ( let l = 0, ll = lights.length; l < ll; l ++ ) {
+
+				const light = lights[ l ];
+				const lightColor = light.color;
+
+				if ( light.isAmbientLight ) {
+
+					_ambientLight.r += lightColor.r;
+					_ambientLight.g += lightColor.g;
+					_ambientLight.b += lightColor.b;
+
+				} else if ( light.isDirectionalLight ) {
+
+					_directionalLights.r += lightColor.r;
+					_directionalLights.g += lightColor.g;
+					_directionalLights.b += lightColor.b;
+
+				} else if ( light.isPointLight ) {
+
+					_pointLights.r += lightColor.r;
+					_pointLights.g += lightColor.g;
+					_pointLights.b += lightColor.b;
+
+				}
+
+			}
+
+		}
+
+		function calculateLight( lights, position, normal, color ) {
+
+			for ( let l = 0, ll = lights.length; l < ll; l ++ ) {
+
+				const light = lights[ l ];
+				const lightColor = light.color;
+
+				if ( light.isDirectionalLight ) {
+
+					const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
+
+					let amount = normal.dot( lightPosition );
+
+					if ( amount <= 0 ) continue;
+
+					amount *= light.intensity;
+
+					color.r += lightColor.r * amount;
+					color.g += lightColor.g * amount;
+					color.b += lightColor.b * amount;
+
+				} else if ( light.isPointLight ) {
+
+					const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
+
+					let amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
+
+					if ( amount <= 0 ) continue;
+
+					amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
+
+					if ( amount == 0 ) continue;
+
+					amount *= light.intensity;
+
+					color.r += lightColor.r * amount;
+					color.g += lightColor.g * amount;
+					color.b += lightColor.b * amount;
+
+				}
+
+			}
+
+		}
+
+		function renderSprite( v1, element, material ) {
+
+			let scaleX = element.scale.x * _svgWidthHalf;
+			let scaleY = element.scale.y * _svgHeightHalf;
+
+			if ( material.isPointsMaterial ) {
+
+				scaleX *= material.size;
+				scaleY *= material.size;
+
+			}
+
+			const path = 'M' + convert( v1.x - scaleX * 0.5 ) + ',' + convert( v1.y - scaleY * 0.5 ) + 'h' + convert( scaleX ) + 'v' + convert( scaleY ) + 'h' + convert( - scaleX ) + 'z';
+			let style = '';
+
+			if ( material.isSpriteMaterial || material.isPointsMaterial ) {
+
+				style = 'fill:' + material.color.getStyle( _this.outputColorSpace ) + ';fill-opacity:' + material.opacity;
+
+			}
+
+			addPath( style, path );
+
+		}
+
+		function renderLine( v1, v2, material ) {
+
+			const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y );
+
+			if ( material.isLineBasicMaterial ) {
+
+				let style = 'fill:none;stroke:' + material.color.getStyle( _this.outputColorSpace ) + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
+
+				if ( material.isLineDashedMaterial ) {
+
+					style = style + ';stroke-dasharray:' + material.dashSize + ',' + material.gapSize;
+
+				}
+
+				addPath( style, path );
+
+			}
+
+		}
+
+		function renderFace3( v1, v2, v3, element, material ) {
+
+			_this.info.render.vertices += 3;
+			_this.info.render.faces ++;
+
+			const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y ) + 'L' + convert( v3.positionScreen.x ) + ',' + convert( v3.positionScreen.y ) + 'z';
+			let style = '';
+
+			if ( material.isMeshBasicMaterial ) {
+
+				_color.copy( material.color );
+
+				if ( material.vertexColors ) {
+
+					_color.multiply( element.color );
+
+				}
+
+			} else if ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
+
+				_diffuseColor.copy( material.color );
+
+				if ( material.vertexColors ) {
+
+					_diffuseColor.multiply( element.color );
+
+				}
+
+				_color.copy( _ambientLight );
+
+				_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
+
+				calculateLight( _lights, _centroid, element.normalModel, _color );
+
+				_color.multiply( _diffuseColor ).add( material.emissive );
+
+			} else if ( material.isMeshNormalMaterial ) {
+
+				_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix ).normalize();
+
+				_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
+
+			}
+
+			if ( material.wireframe ) {
+
+				style = 'fill:none;stroke:' + _color.getStyle( _this.outputColorSpace ) + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
+
+			} else {
+
+				style = 'fill:' + _color.getStyle( _this.outputColorSpace ) + ';fill-opacity:' + material.opacity;
+
+			}
+
+			addPath( style, path );
+
+		}
+
+		// Hide anti-alias gaps
+
+		function expand( v1, v2, pixels ) {
+
+			let x = v2.x - v1.x, y = v2.y - v1.y;
+			const det = x * x + y * y;
+
+			if ( det === 0 ) return;
+
+			const idet = pixels / Math.sqrt( det );
+
+			x *= idet; y *= idet;
+
+			v2.x += x; v2.y += y;
+			v1.x -= x; v1.y -= y;
+
+		}
+
+		function addPath( style, path ) {
+
+			if ( _currentStyle === style ) {
+
+				_currentPath += path;
+
+			} else {
+
+				flushPath();
+
+				_currentStyle = style;
+				_currentPath = path;
+
+			}
+
+		}
+
+		function flushPath() {
+
+			if ( _currentPath ) {
+
+				_svgNode = getPathNode( _pathCount ++ );
+				_svgNode.setAttribute( 'd', _currentPath );
+				_svgNode.setAttribute( 'style', _currentStyle );
+				_svg.appendChild( _svgNode );
+
+			}
+
+			_currentPath = '';
+			_currentStyle = '';
+
+		}
+
+		function getPathNode( id ) {
+
+			if ( _svgPathPool[ id ] == null ) {
+
+				_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+
+				if ( _quality == 0 ) {
+
+					_svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
+
+				}
+
+				return _svgPathPool[ id ];
+
+			}
+
+			return _svgPathPool[ id ];
+
+		}
+
+	}
+
+}
+
+export { SVGObject, SVGRenderer };