Editor: Improve SVG setup. (#33447)

editor/js/Loader.js

@@ -704,25 +704,54 @@ function Loader( editor ) {
 					group.scale.multiplyScalar( 0.1 );
 					group.scale.y *= - 1;
 
+					let renderOrder = 0;
+
 					for ( let i = 0; i < paths.length; i ++ ) {
 
 						const path = paths[ i ];
 
-						const material = new THREE.MeshBasicMaterial( {
-							color: path.color,
-							depthWrite: false
-						} );
+						// fill
+
+						const fillMaterial = SVGLoader.createFillMaterial( path );
+
+						if ( fillMaterial ) {
+
+							const shapes = SVGLoader.createShapes( path );
 
-						const shapes = SVGLoader.createShapes( path );
+							for ( let j = 0; j < shapes.length; j ++ ) {
 
-						for ( let j = 0; j < shapes.length; j ++ ) {
+								const shape = shapes[ j ];
 
-							const shape = shapes[ j ];
+								const geometry = new THREE.ShapeGeometry( shape );
+								const mesh = new THREE.Mesh( geometry, fillMaterial );
+								mesh.renderOrder = renderOrder ++;
+
+								group.add( mesh );
+
+							}
+
+						}
 
-							const geometry = new THREE.ShapeGeometry( shape );
-							const mesh = new THREE.Mesh( geometry, material );
+						// stroke
 
-							group.add( mesh );
+						const strokeMaterial = SVGLoader.createStrokeMaterial( path );
+
+						if ( strokeMaterial ) {
+
+							for ( const subPath of path.subPaths ) {
+
+								const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
+
+								if ( geometry ) {
+
+									const mesh = new THREE.Mesh( geometry, strokeMaterial );
+									mesh.renderOrder = renderOrder ++;
+
+									group.add( mesh );
+
+								}
+
+							}
 
 						}