diff --git a/js/main.js b/js/main.js
index 40dad3cbf52c229f6558f52f7e3f44a871b62dc4..f0c1f4df664ed9e33a718d5ed56d080798305420 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,6 +6,22 @@
$(function(){
three = Three();
+ _.extend(three, Backbone.Events);
+ three.on("threeRender", three.render);
+ three.on("threeAdd", function(object){
+ three.scene.add(object);
+ });
+ three.on("threeRemove", function(object){
+ three.scene.remove(object);
+ });
+
+ //init models and views
+ window.fillGeometry = new FillGeometry();//init a singleton, add to global scope
+ new ImportView({model: window.fillGeometry});
+
+
+ //window.fillGeometry.set({geometry:"stuff"});
+
setupNavBar();
workers = persistentWorkers(8);
diff --git a/js/models/fillGeometry.js b/js/models/fillGeometry.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bf6187026b59bae9eebff2729b8ed3ea8a35b2de 100644
--- a/js/models/fillGeometry.js
+++ b/js/models/fillGeometry.js
@@ -0,0 +1,61 @@
+/**
+ * Created by aghassaei on 1/16/15.
+*/
+
+
+FillGeometry = Backbone.Model.extend({
+
+ defaults: {
+ scale: 1.0,
+ material: new THREE.MeshLambertMaterial(
+ {color:0xffa500,
+ shading: THREE.FlatShading,
+ transparent:true,
+ opacity:0.5,
+ side:THREE.DoubleSide}),
+ geometry: new THREE.BoxGeometry(100, 100, 100),
+ filename: "no file loaded",
+ dimensions: "",
+ orientation: ""
+ },
+
+ initialize: function(){
+
+ this.buildNewMesh();
+ this.renderMesh();
+
+ //bind events
+ this.on("change:mesh change:scale change:orientation", this.renderMesh);
+ this.on("change:geometry", this.buildNewMesh);
+ },
+
+ buildNewMesh:function(){
+
+ three.trigger("threeRemove", this.previous("mesh"));//remove current mesh from scene
+ this.set(_.omit(this.defaults, ["geometry", "material"]), {silent:true});//restore defaults
+ this.set(
+ {mesh: new THREE.Mesh(this.get("geometry"), this.get("material"))});
+// _.each(workers.allWorkers, function(worker){
+// worker.postMessage({model: JSON.stringify(e.content)});
+// });
+ },
+
+ renderMesh: function(){
+ console.log("renderfillgeo");
+ three.trigger("threeAdd", this.get("mesh"));
+ three.trigger("threeRender");
+ },
+
+ rotate: function(axis){
+ var mesh = this.get("mesh");
+ if (axis == "x"){
+ mesh.rotateX(Math.PI/2);
+ } else if (axis == "y"){
+ mesh.rotateX(Math.PI/2);
+ } else {
+ mesh.rotateX(Math.PI/2);
+ }
+ }
+
+});
+
diff --git a/js/threeMain.js b/js/threeMain.js
index ba18619803493545b55c2ca513abb6d27c6c5e99..d364f27980241adef234c4f56a5be0e2a21e1f6a 100644
--- a/js/threeMain.js
+++ b/js/threeMain.js
@@ -77,7 +77,6 @@ function Three(){
}
function render(){
-
renderer.render( scene, camera );
}
diff --git a/js/views/importView.js b/js/views/importView.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f11e67e91451fa79a03497dbd12f3715c9570af
--- /dev/null
+++ b/js/views/importView.js
@@ -0,0 +1,124 @@
+/**
+ * Created by aghassaei on 1/16/15.
+ */
+
+
+ImportView = Backbone.View.extend({
+
+ el: "#importGeometry",
+
+ events: {
+ "change #uploadMesh": "uploadMesh",
+ "click .selectMesh": "selectMesh",
+ "fileselect .btn-file :file": "readDataURL",
+ "click .stlRotate": "rotate",
+ "slide #modelScale": "scale"
+ },
+
+ initialize: function(){
+
+ _.bindAll(this, "render", "onMeshLoad");
+ this.model.bind("change", this.render);
+
+ this.render();
+ },
+
+ selectMesh: function(e){//select mesh from dropdown list
+ e.preventDefault();
+ var filename = $(e.target).data("file");
+ this.loadMeshFromURL('data/' + filename);
+ this.model.set("filename", filename);
+ },
+
+ uploadMesh: function(e){//select a mesh to upload
+ var input = $(e.target),
+ numFiles = input.get(0).files ? input.get(0).files.length : 1,
+ label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+ input.trigger('fileselect', [numFiles, label, input.get(0).files]);
+ input.val("");
+ },
+
+ readDataURL: function(event, numFiles, filename, files){
+ if (files.length>1) console.log("too many files selected");
+ var reader = new FileReader();
+ reader.readAsDataURL(files[0]);
+ var self = this;
+ reader.onload = (function() {
+ return function(e) {
+ self.loadMeshFromURL(e.target.result);
+ self.model.set("filename", filename);
+ }
+ })();
+ },
+
+ loadMeshFromURL: function(url){
+ var loader = new THREE.STLLoader();
+ loader.addEventListener('load', this.onMeshLoad);
+ loader.load(url);
+ },
+
+ onMeshLoad: function(e){
+ this.model.set("geometry", e.content);
+ },
+
+ scale: function(e){
+ this.model.set("scale", $(e.target).slider('getValue'));
+ },
+
+ rotate: function(e){
+ e.preventDefault();
+ var axis = $(e.target).data("axis");
+ this.model.rotate(axis);
+ },
+
+ render: function(){
+
+ console.log("renderView");
+ this.$el.html(this.template(this.model.attributes));
+
+// $(".slider").slider({//format slider
+// formatter: function(value) {
+// console.log(value);
+// return value;
+// }
+// });
+ },
+
+ template: _.template(
+ '<div class="row demo-row">\
+ <div class="col-xs-3">\
+ <div>\
+ <span class="btn btn-default btn-file fullWidth">\
+ Upload STL<input id="uploadMesh" type="file">\
+ </span>\
+ </div>\
+ <div class="text-center">\
+ OR\
+ </div>\
+ <div>\
+ <div class="btn-group fullWidth">\
+ <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>\
+ <ul role="menu" class="dropdown-menu">\
+ <li><a class="selectMesh" data-file="Airbus_A300-600.stl" href="#">Plane</a></li>\
+ </ul>\
+ </div><!-- /btn-group -->\
+ </div>\
+ </div> <!-- /.col-xs-3 -->\
+ <div class="col-xs-9">\
+ Current File: <%= filename %><br/>\
+ <%= dimensions %>\
+ <div>Change model scale:</div>\
+ <div class="col-xs-4">\
+ <a href="#" data-axis="z" class="stlRotate btn btn-block btn-lg btn-default">Rotate X</a>\
+ </div>\
+ <div class="col-xs-4">\
+ <a href="#" data-axis="y" class="stlRotate btn btn-block btn-lg btn-default">Rotate Y</a>\
+ </div>\
+ <div class="col-xs-4">\
+ <a href="#" data-axis="x" class="stlRotate btn btn-block btn-lg btn-default">Rotate Z</a>\
+ </div>\
+ </div>\
+ </div>')
+
+
+});
\ No newline at end of file
diff --git a/main.html b/main.html
index 0ec547b5cac30906d8627201b027c37d4506e1e9..a48a4b05d4584fb631dc7c9206c35c33326f3b36 100644
--- a/main.html
+++ b/main.html
@@ -2,7 +2,7 @@
<html>
<head>
- <title>Title</title>
+ <title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/analytics.js"></script>
@@ -11,7 +11,7 @@
<script src="dependencies/jquery-2.1.3.js"></script>
<script src="dependencies/underscore.js"></script>
- <!--backbone model view framework-->
+ <!--backbone model/view framework-->
<script src="dependencies/backbone.js"></script>
<!--flatUI bootstrap theme-->
@@ -40,9 +40,18 @@
<script src="js/persistentWorkers.js"></script><!--global workers-->
<script src="js/main.js"></script>
+
+ <!--models-->
+ <script src="js/models/fillGeometry.js"></script>
+
+ <!--views-->
+ <script src="js/views/importView.js"></script>
+
+
+
<script src="dependencies/loaders/STLLoader.js"></script>
- <script src="js/views/importMenu.js"></script>
- <script src="js/views/elementMenu.js"></script>
+ <!--<script src="js/views/importMenu.js"></script>-->
+ <!--<script src="js/views/elementMenu.js"></script>-->
<script src="js/views/exportMenu.js"></script>
<script src="js/views/navbar.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
@@ -87,40 +96,6 @@
</div><!-- /.navbar-collapse -->
</nav>
<div id="importGeometry" class="row navMenu">
- <div class="row demo-row">
- <div class="col-xs-3">
- <div>
- <span class="btn btn-default btn-file fullWidth">
- Upload STL<input id="uploadSTL" type="file">
- </span>
- </div>
- <div class="text-center">
- OR
- </div>
- <div>
- <div class="btn-group fullWidth">
- <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>
- <ul role="menu" class="dropdown-menu">
- <li><a class="stlImport" data-file="Airbus_A300-600.stl" href="#">Plane</a></li>
- </ul>
- </div><!-- /btn-group -->
- </div>
- </div> <!-- /.col-xs-3 -->
- <div id="STLImportStats" class="col-xs-9">
- <div id="STLFilename"></div><br/><div id="meshDimensions"></div>
- <div>Change model scale:</div>
- <input id="stlModelScale" type="text" data-slider-min="0.0" data-slider-max="20" data-slider-step="0.1" data-slider-value="1"/>
- <div class="col-xs-4">
- <a href="#" id="stlRotateX" class="btn btn-block btn-lg btn-default">Rotate X</a>
- </div>
- <div class="col-xs-4">
- <a href="#" id="stlRotateY" class="btn btn-block btn-lg btn-default">Rotate Y</a>
- </div>
- <div class="col-xs-4">
- <a href="#" id="stlRotateZ" class="btn btn-block btn-lg btn-default">Rotate Z</a>
- </div>
- </div>
- </div>
</div>
<div id="element" class="row navMenu">
<div class="row demo-row">