svg import

.gitignore

+assets/

dependencies/SVGLoader.js

+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author zz85 / http://joshuakoo.com/
+ */
+
+THREE.SVGLoader = function ( manager ) {
+
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+
+};
+
+THREE.SVGLoader.prototype = {
+
+	constructor: THREE.SVGLoader,
+
+	load: function ( url, onLoad, onProgress, onError ) {
+
+		var scope = this;
+
+		var parser = new DOMParser();
+
+		var loader = new THREE.FileLoader( scope.manager );
+		loader.load( url, function ( svgString ) {
+
+			var doc = parser.parseFromString( svgString, 'image/svg+xml' );  // application/xml
+
+			onLoad( doc.documentElement );
+
+		}, onProgress, onError );
+
+	}
+
+};

index.html

@@ -237,6 +237,7 @@
     <script type="text/javascript" src="dependencies/OrbitControls.js"></script>
     <script type="text/javascript" src="dependencies/underscore-min.js"></script>
     <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>
+    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
 
     <script type="text/javascript" src="js/GLBoilerplate.js"></script>
     <script type="text/javascript" src="js/GPUMath.js"></script>
@@ -248,6 +249,7 @@
     <script type="text/javascript" src="js/crease.js"></script>
     <script type="text/javascript" src="js/model.js"></script>
     <script type="text/javascript" src="js/dynamicModel.js"></script>
+    <script type="text/javascript" src="js/pattern.js"></script>
 
     <script type="text/javascript" src="js/main.js"></script>
 </head>
@@ -287,7 +289,7 @@
             <div>&Delta; t = <span id="deltaT"></span> seconds</div>
         </div>
     </div>
-    <div id="extraSpace"></div>
+    <div class="extraSpace"></div>
 </div>
 <div id="controls">
     <a href="#" id="about" class="btn btn-lg btn-default">About</a><br/><br/>
@@ -309,13 +311,8 @@
         <span class="label-slider">Panel Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
         <input value="" placeholder="" class="form-control int" type="text">
     </div>
-    <!--<a href="#" id="addRemoveFixed" class="btn btn-lg btn-default">Add/Remove Fixed Constraint</a>-->
-    <!--<span class="titleSpan">Available Materials:</span>-->
-    <!--<div id="materialTypes" class="indent">-->
-        <!--<label class="radio"><input name="materialTypes" value="none" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span><span id="noMaterial">No Material Selected</span></label>-->
-    <!--</div>-->
-    <!--<a href="#" id="addMaterial" class="btn btn-lg btn-default">+ New Material</a>-->
-    <!--<div id="extraSpace"></div>-->
+    <div id="svgViewer"></div>
+    <div class="extraSpace"></div>
 </div>
 <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg">

js/main.js

@@ -42,6 +42,7 @@ $(function() {
 
     globals = initGlobals();
     globals.model = initModel(globals);
+    globals.pattern = initPattern(globals);
     globals.dynamicModel = initDynamicModel(globals);
     globals.threeView.render();
 });
\ No newline at end of file

js/model.js

@@ -22,7 +22,7 @@ function initModel(globals){
     edges.push(new Beam([nodes[3], nodes[2]]));
 
     var creases = [];
-    creases.push(new Crease(edges[2], 1, 0, Math.PI, 1, nodes[3], nodes[1], 0));
+    creases.push(new Crease(edges[2], 1, 0, Math.PI/2, 1, nodes[3], nodes[1], 0));
 
     _.each(nodes, function(node){
         globals.threeView.sceneAddModel(node.getObject3D());

js/pattern.js

+/**
+ * Created by amandaghassaei on 2/25/17.
+ */
+
+function initPattern(globals){
+
+    var SVGloader = new THREE.SVGLoader();
+
+    function loadSVG(url, callback){
+
+        SVGloader.load(url, callback, function(){}, function(error){
+            alert("Error loading SVG: " + url);
+            console.log(error);
+        });
+
+    }
+
+    loadSVG("/assets/Tessellations/miura-ori-dashed.svg", function(doc){
+        $("#svgViewer").html(doc);
+        console.log(doc);
+    });
+
+    return {
+        loadSVG: loadSVG
+    }
+}
\ No newline at end of file

main.css

@@ -27,7 +27,7 @@ body{
     width:420px;
     padding:20px 20px;
     overflow: auto;
-    max-height: 100%;
+    height: 100%;
     /*background: rgba(255,255,255,0.5);*/
 }
 #controls>a{
@@ -256,7 +256,7 @@ span.modal-close{
     font-size: 15px;
 }
 
-#extraSpace{
+.extraSpace{
     display: inline-block;
     width:100%;
     height:15px;
@@ -284,3 +284,13 @@ span.modal-close{
 .paddingBottom{
     margin-bottom: 20px;
 }
+
+#svgViewer{
+    max-width: 100%;
+    max-height: 300px;
+    float: right;
+}
+svg{
+    width: 100%;
+    height: 100%;
+}