Bläddra i källkod

Exampels: Enhance svg_sandbox with file showcase

Mugen87 6 år sedan
förälder
incheckning
0987a3e3a7
2 ändrade filer med 23 tillägg och 0 borttagningar
  1. 5 0
      examples/models/svg/hexagon.svg
  2. 18 0
      examples/svg_sandbox.html

+ 5 - 0
examples/models/svg/hexagon.svg

@@ -0,0 +1,5 @@
+<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#ff0000"></polygon>
+
+</svg>

+ 18 - 0
examples/svg_sandbox.html

@@ -178,6 +178,24 @@
 
 				}
 
+				// CUSTOM FROM FILE
+
+				fetch( 'models/svg/hexagon.svg' )
+					.then( response => response.text() )
+					.then( svg => {
+
+						var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
+						var parser = new DOMParser();
+						var doc = parser.parseFromString( svg, 'image/svg+xml' );
+
+						node.appendChild( doc.documentElement );
+
+						var object = new THREE.SVGObject( node );
+						object.position.x = 500;
+						scene.add( object );
+
+					} );
+
 				// LIGHTS
 
 				var ambient = new THREE.AmbientLight( 0x80ffff );