Ver código fonte

Updated examples builds

Mr.doob 4 anos atrás
pai
commit
1f1125f184
2 arquivos alterados com 37 adições e 17 exclusões
  1. 3 3
      examples/js/lines/LineMaterial.js
  2. 34 14
      examples/js/loaders/SVGLoader.js

+ 3 - 3
examples/js/lines/LineMaterial.js

@@ -221,7 +221,7 @@
 
 			#endif
 
-			float alpha = opacity;
+			float alpha = 1.0;
 
 			#ifdef ALPHA_TO_COVERAGE
 
@@ -251,12 +251,12 @@
 
 			#endif
 
-			vec4 diffuseColor = vec4( diffuse, alpha );
+			vec4 diffuseColor = vec4( diffuse, opacity * alpha );
 
 			#include <logdepthbuf_fragment>
 			#include <color_fragment>
 
-			gl_FragColor = vec4( diffuseColor.rgb, alpha );
+			gl_FragColor = diffuseColor;
 
 			#include <tonemapping_fragment>
 			#include <encodings_fragment>

+ 34 - 14
examples/js/loaders/SVGLoader.js

@@ -651,29 +651,49 @@
 
 				const x = parseFloatWithUnits( node.getAttribute( 'x' ) || 0 );
 				const y = parseFloatWithUnits( node.getAttribute( 'y' ) || 0 );
-				const rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || 0 );
-				const ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || 0 );
+				const rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || node.getAttribute( 'ry' ) || 0 );
+				const ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || node.getAttribute( 'rx' ) || 0 );
 				const w = parseFloatWithUnits( node.getAttribute( 'width' ) );
-				const h = parseFloatWithUnits( node.getAttribute( 'height' ) );
-				const path = new THREE.ShapePath();
-				path.moveTo( x + 2 * rx, y );
-				path.lineTo( x + w - 2 * rx, y );
-				if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
-				path.lineTo( x + w, y + h - 2 * ry );
-				if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h );
-				path.lineTo( x + 2 * rx, y + h );
+				const h = parseFloatWithUnits( node.getAttribute( 'height' ) ); // Ellipse arc to Bezier approximation Coefficient (Inversed). See:
+				// https://spencermortensen.com/articles/bezier-circle/
+
+				const bci = 1 - 0.551915024494;
+				const path = new THREE.ShapePath(); // top left
+
+				path.moveTo( x + rx, y ); // top right
+
+				path.lineTo( x + w - rx, y );
 
 				if ( rx !== 0 || ry !== 0 ) {
 
-					path.bezierCurveTo( x, y + h, x, y + h, x, y + h - 2 * ry );
+					path.bezierCurveTo( x + w - rx * bci, y, x + w, y + ry * bci, x + w, y + ry );
+
+				} // bottom right
+
+
+				path.lineTo( x + w, y + h - ry );
+
+				if ( rx !== 0 || ry !== 0 ) {
+
+					path.bezierCurveTo( x + w, y + h - ry * bci, x + w - rx * bci, y + h, x + w - rx, y + h );
+
+				} // bottom left
+
+
+				path.lineTo( x + rx, y + h );
+
+				if ( rx !== 0 || ry !== 0 ) {
+
+					path.bezierCurveTo( x + rx * bci, y + h, x, y + h - ry * bci, x, y + h - ry );
+
+				} // back to top left
 
-				}
 
-				path.lineTo( x, y + 2 * ry );
+				path.lineTo( x, y + ry );
 
 				if ( rx !== 0 || ry !== 0 ) {
 
-					path.bezierCurveTo( x, y, x, y, x + 2 * rx, y );
+					path.bezierCurveTo( x, y + ry * bci, x + rx * bci, y, x + rx, y );
 
 				}