From 33802c8b1047bf03dbbef08fec5fef43e98f0263 Mon Sep 17 00:00:00 2001
From: amandaghassaei <amandaghassaei@gmail.com>
Date: Sat, 25 Feb 2017 18:38:26 -0500
Subject: [PATCH] svg import
---
.gitignore | 1 +
dependencies/SVGLoader.js | 33 +++++++++++++++++++++++++++++++++
index.html | 13 +++++--------
js/main.js | 1 +
js/model.js | 2 +-
js/pattern.js | 26 ++++++++++++++++++++++++++
main.css | 14 ++++++++++++--
7 files changed, 79 insertions(+), 11 deletions(-)
create mode 100644 .gitignore
create mode 100644 dependencies/SVGLoader.js
create mode 100644 js/pattern.js
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ee88966
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+assets/
diff --git a/dependencies/SVGLoader.js b/dependencies/SVGLoader.js
new file mode 100644
index 0000000..38bacad
--- /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 9bfa502..047dc84 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 2c6ec84..c4b7291 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 df2bbf4..c7e6c6c 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 0000000..4e6ba10
--- /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 4df3f0f..bd1546c 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%;
+}
--
GitLab