Merge pull request #15759 from yomboprime/svg_hole

SVGLoader: fix Z command, return to origin of path

examples/js/loaders/SVGLoader.js

@@ -162,6 +162,7 @@ THREE.SVGLoader.prototype = {
 							} else {
 								path.lineTo( point.x, point.y );
 							}
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -172,6 +173,7 @@ THREE.SVGLoader.prototype = {
 							control.x = point.x;
 							control.y = point.y;
 							path.lineTo( point.x, point.y );
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -182,6 +184,7 @@ THREE.SVGLoader.prototype = {
 							control.x = point.x;
 							control.y = point.y;
 							path.lineTo( point.x, point.y );
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -193,6 +196,7 @@ THREE.SVGLoader.prototype = {
 							control.x = point.x;
 							control.y = point.y;
 							path.lineTo( point.x, point.y );
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -211,6 +215,7 @@ THREE.SVGLoader.prototype = {
 							control.y = numbers[ j + 3 ];
 							point.x = numbers[ j + 4 ];
 							point.y = numbers[ j + 5 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -229,6 +234,7 @@ THREE.SVGLoader.prototype = {
 							control.y = numbers[ j + 1 ];
 							point.x = numbers[ j + 2 ];
 							point.y = numbers[ j + 3 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -245,6 +251,7 @@ THREE.SVGLoader.prototype = {
 							control.y = numbers[ j + 1 ];
 							point.x = numbers[ j + 2 ];
 							point.y = numbers[ j + 3 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -263,6 +270,7 @@ THREE.SVGLoader.prototype = {
 							control.y = ry;
 							point.x = numbers[ j + 0 ];
 							point.y = numbers[ j + 1 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -277,6 +285,7 @@ THREE.SVGLoader.prototype = {
 							parseArcCommand(
 								path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
 							);
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -294,6 +303,7 @@ THREE.SVGLoader.prototype = {
 							} else {
 								path.lineTo( point.x, point.y );
 							}
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -304,6 +314,7 @@ THREE.SVGLoader.prototype = {
 							control.x = point.x;
 							control.y = point.y;
 							path.lineTo( point.x, point.y );
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -314,6 +325,7 @@ THREE.SVGLoader.prototype = {
 							control.x = point.x;
 							control.y = point.y;
 							path.lineTo( point.x, point.y );
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -325,6 +337,7 @@ THREE.SVGLoader.prototype = {
 							control.x = point.x;
 							control.y = point.y;
 							path.lineTo( point.x, point.y );
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -343,6 +356,7 @@ THREE.SVGLoader.prototype = {
 							control.y = point.y + numbers[ j + 3 ];
 							point.x += numbers[ j + 4 ];
 							point.y += numbers[ j + 5 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -361,6 +375,7 @@ THREE.SVGLoader.prototype = {
 							control.y = point.y + numbers[ j + 1 ];
 							point.x += numbers[ j + 2 ];
 							point.y += numbers[ j + 3 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -377,6 +392,7 @@ THREE.SVGLoader.prototype = {
 							control.y = point.y + numbers[ j + 1 ];
 							point.x += numbers[ j + 2 ];
 							point.y += numbers[ j + 3 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -395,6 +411,7 @@ THREE.SVGLoader.prototype = {
 							control.y = ry;
 							point.x = point.x + numbers[ j + 0 ];
 							point.y = point.y + numbers[ j + 1 ];
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -409,6 +426,7 @@ THREE.SVGLoader.prototype = {
 							parseArcCommand(
 								path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
 							);
+							if ( j === 0 && doSetFirstPoint === true) firstPoint.copy( point );
 						}
 						break;
 
@@ -432,10 +450,7 @@ THREE.SVGLoader.prototype = {
 
 				// console.log( type, parseFloats( data ), parseFloats( data ).length  )
 
-				if ( doSetFirstPoint === true ) {
-					firstPoint.copy( point );
-					doSetFirstPoint = false;
-				}
+				doSetFirstPoint = false;
 
 			}
 

examples/models/svg/tests/8.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 210 197"
+   height="60mm"
+   width="80mm">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#e9c6af;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 80,10 0,50 -70,0 0,-50 z m -51,31 5,0 0,-5 -5,0 z"
+     id="path7925" />
+</svg>

examples/webgl_loader_svg.html

@@ -40,10 +40,11 @@
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/loaders/SVGLoader.js"></script>
 		<script src="js/libs/stats.min.js"></script>
+		<script src='js/libs/dat.gui.min.js'></script>
 
 		<script>
 
-			var renderer, stats, scene, camera;
+			var renderer, stats, scene, camera, gui, currentURL;
 
 			init();
 			animate();
@@ -56,13 +57,92 @@
 
 				//
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xb0b0b0 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0, 0, 200 );
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 0, 0, 200 );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				//
+
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.screenSpacePanning = true;
+
+				//
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				document.body.addEventListener( 'dblclick', function ( event ) {
+
+					var group = scene.children[ 1 ];
+					group.traverse( function ( child ) {
+
+						if ( child.material ) child.material.wireframe = ! child.material.wireframe;
+
+					} );
+
+				} );
+
+				currentURL = 'models/svg/tiger.svg';
+
+				loadSVG( currentURL );
+
+				createGUI();
+
+			}
+
+			function createGUI() {
+
+				if ( gui ) {
+					gui.destroy();
+				}
+
+				guiData = {
+
+					currentURL: currentURL
+
+				};
+
+				gui = new dat.GUI( { width: 350 } );
+
+				gui.add( guiData, 'currentURL', {
+
+					"Tiger": 'models/svg/tiger.svg',
+					"Hexagon": 'models/svg/hexagon.svg',
+					"Test 1": 'models/svg/tests/1.svg',
+					"Test 2": 'models/svg/tests/2.svg',
+					"Test 3": 'models/svg/tests/3.svg',
+					"Test 4": 'models/svg/tests/4.svg',
+					"Test 5": 'models/svg/tests/5.svg',
+					"Test 6": 'models/svg/tests/6.svg',
+					"Test 7": 'models/svg/tests/7.svg',
+					"Test 8": 'models/svg/tests/8.svg'
+
+				} ).name( 'SVG File' ).onChange( function ( value ) {
+
+					currentURL = value;
+
+					loadSVG( currentURL );
+
+				} );
+
+			}
+
+			function loadSVG( url ) {
+
+				//
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xb0b0b0 );
 
 				//
 
@@ -73,7 +153,7 @@
 				//
 
 				var loader = new THREE.SVGLoader();
-				loader.load( 'models/svg/tiger.svg', function ( paths ) {
+				loader.load( url, function ( paths ) {
 
 					var group = new THREE.Group();
 					group.scale.multiplyScalar( 0.25 );
@@ -110,38 +190,6 @@
 
 				} );
 
-				//
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				//
-
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.screenSpacePanning = true;
-
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize, false );
-
-				document.body.addEventListener( 'dblclick', function ( event ) {
-
-					var group = scene.children[ 1 ];
-					group.traverse( function ( child ) {
-
-						if ( child.material ) child.material.wireframe = ! child.material.wireframe;
-
-					} );
-
-				} );
-
 			}
 
 			function onWindowResize() {