diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..ee889666ef01553b9e643877900de8289c38171f --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +assets/ diff --git a/dependencies/SVGLoader.js b/dependencies/SVGLoader.js new file mode 100644 index 0000000000000000000000000000000000000000..38bacad8ad92c64908660e9b6faca288c3310cd2 --- /dev/null +++ b/dependencies/SVGLoader.js @@ -0,0 +1,33 @@ +/** + * @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 ); + + } + +}; diff --git a/index.html b/index.html index 9bfa5023a2a27aeccae7027822bbb48d68fe2d34..047dc842d2486e429005a2f4823d9ded25364474 100644 --- a/index.html +++ b/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>Δ 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"> diff --git a/js/main.js b/js/main.js index 2c6ec845e344806d97c80fbcd30171eb95f5d7a8..c4b72914496ee1a04e4f95b0c508f5c51fc6f1c8 100644 --- a/js/main.js +++ b/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 diff --git a/js/model.js b/js/model.js index df2bbf46b6507ebd08c755db6b591ec4dc6ff357..c7e6c6cca936cc43fa207c29422af9e2f4cd0227 100644 --- a/js/model.js +++ b/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()); diff --git a/js/pattern.js b/js/pattern.js new file mode 100644 index 0000000000000000000000000000000000000000..4e6ba10a80cc77e64534475c6b328cbbbb5f2bd9 --- /dev/null +++ b/js/pattern.js @@ -0,0 +1,26 @@ +/** + * 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 diff --git a/main.css b/main.css index 4df3f0f475292e814be80766fe94a38903076c4c..bd1546c991d8574e3bc3cea7218e4724feeea993 100644 --- a/main.css +++ b/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%; +}