SVGLoader: Add material helpers. (#33424)

examples/jsm/loaders/SVGLoader.js

@@ -1,10 +1,13 @@
 import {
 	Box2,
 	BufferGeometry,
+	Color,
+	DoubleSide,
 	FileLoader,
 	Float32BufferAttribute,
 	Loader,
 	Matrix3,
+	MeshBasicMaterial,
 	Path,
 	Shape,
 	ShapePath,
@@ -2000,6 +2003,48 @@ class SVGLoader extends Loader {
 
 	}
 
+	/**
+	 * Creates a material for rendering the fill of the given path.
+	 *
+	 * @param {ShapePath} shapePath - The shape path.
+	 * @return {?MeshBasicMaterial} The fill material. `null` if the path has no fill.
+	 */
+	static createFillMaterial( shapePath ) {
+
+		const style = shapePath.userData.style;
+		if ( style.fill === undefined || style.fill === 'none' ) return null;
+
+		return new MeshBasicMaterial( {
+			color: shapePath.color,
+			opacity: style.fillOpacity * ( style.opacity || 1 ),
+			transparent: true,
+			side: DoubleSide,
+			depthWrite: false,
+		} );
+
+	}
+
+	/**
+	 * Creates a material for rendering the stroke of the given path.
+	 *
+	 * @param {ShapePath} shapePath - The shape path.
+	 * @return {?MeshBasicMaterial} The stroke material. `null` if the path has no stroke.
+	 */
+	static createStrokeMaterial( shapePath ) {
+
+		const style = shapePath.userData.style;
+		if ( style.stroke === undefined || style.stroke === 'none' ) return null;
+
+		return new MeshBasicMaterial( {
+			color: new Color().setStyle( style.stroke, COLOR_SPACE_SVG ),
+			opacity: style.strokeOpacity * ( style.opacity || 1 ),
+			transparent: true,
+			side: DoubleSide,
+			depthWrite: false,
+		} );
+
+	}
+
 	/**
 	 * Creates from the given shape path and array of shapes.
 	 *

examples/webgl_loader_svg.html

@@ -173,56 +173,50 @@
 
 					for ( const path of data.paths ) {
 
-						const fillColor = path.userData.style.fill;
+						if ( guiData.drawFillShapes ) {
 
-						if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) {
+							const material = SVGLoader.createFillMaterial( path );
 
-							const material = new THREE.MeshBasicMaterial( {
-								color: new THREE.Color().setStyle( fillColor ),
-								opacity: path.userData.style.fillOpacity,
-								transparent: true,
-								side: THREE.DoubleSide,
-								depthWrite: false,
-								wireframe: guiData.fillShapesWireframe
-							} );
+							if ( material ) {
 
-							const shapes = SVGLoader.createShapes( path );
+								material.wireframe = guiData.fillShapesWireframe;
 
-							for ( const shape of shapes ) {
+								const shapes = SVGLoader.createShapes( path );
 
-								const geometry = new THREE.ShapeGeometry( shape );
-								const mesh = new THREE.Mesh( geometry, material );
-								mesh.renderOrder = renderOrder ++;
+								for ( const shape of shapes ) {
 
-								group.add( mesh );
+									const geometry = new THREE.ShapeGeometry( shape );
+									const mesh = new THREE.Mesh( geometry, material );
+									mesh.renderOrder = renderOrder ++;
+
+									group.add( mesh );
+
+								}
 
 							}
 
 						}
 
-						const strokeColor = path.userData.style.stroke;
+						if ( guiData.drawStrokes ) {
 
-						if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) {
+							const material = SVGLoader.createStrokeMaterial( path );
 
-							const material = new THREE.MeshBasicMaterial( {
-								color: new THREE.Color().setStyle( strokeColor ),
-								opacity: path.userData.style.strokeOpacity,
-								transparent: true,
-								side: THREE.DoubleSide,
-								depthWrite: false,
-								wireframe: guiData.strokesWireframe
-							} );
+							if ( material ) {
 
-							for ( const subPath of path.subPaths ) {
+								material.wireframe = guiData.strokesWireframe;
 
-								const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
+								for ( const subPath of path.subPaths ) {
 
-								if ( geometry ) {
+									const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
 
-									const mesh = new THREE.Mesh( geometry, material );
-									mesh.renderOrder = renderOrder ++;
+									if ( geometry ) {
 
-									group.add( mesh );
+										const mesh = new THREE.Mesh( geometry, material );
+										mesh.renderOrder = renderOrder ++;
+
+										group.add( mesh );
+
+									}
 
 								}