diff --git a/js/models/Highlighter.js b/js/models/Highlighter.js
deleted file mode 100644
index 44ddab8fa1cce0145eca56bcad3beb0f454b7097..0000000000000000000000000000000000000000
--- a/js/models/Highlighter.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Created by aghassaei on 2/1/15.
- */
-
-Highlighter = Backbone.Model.extend({
-
- defaults: {
- },
-
- initialize: function(options){
-
-
- }
-
-});
\ No newline at end of file
diff --git a/js/threeViews/Highlighter.js b/js/threeViews/Highlighter.js
new file mode 100644
index 0000000000000000000000000000000000000000..88a53e64ecf99a41693df8a3c483f5f081022592
--- /dev/null
+++ b/js/threeViews/Highlighter.js
@@ -0,0 +1,74 @@
+/**
+ * Created by aghassaei on 2/1/15.
+ */
+
+Highlighter = Backbone.View.extend({
+
+ mesh: null,
+ currentHighlightedFace: null,
+
+ initialize: function(){
+
+ var geometry = new THREE.Geometry();
+ //can't change size of faces or vertices buffers dynamically
+ geometry.vertices = [new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0)];
+ geometry.faces = [new THREE.Face3(0,1,2)];
+ geometry.dynamic = true;
+ this.mesh = new THREE.Mesh(geometry,
+ new THREE.MeshBasicMaterial({
+ side:THREE.DoubleSide,
+ transparent:true,
+ opacity:0.4,
+ color:0xffffff,
+ vertexColors:THREE.FaceColors
+ }));
+ window.three.sceneAdd(this.mesh, null);
+ this.hide();
+ },
+
+ hide: function(){
+ if (this.mesh.visible){
+ this.mesh.visible = false;
+ window.three.render();
+ }
+ },
+
+ show: function(shouldRender){
+ if (!this.mesh.visible){
+ this.mesh.visible = true;
+ if (shouldRender) window.three.render();
+ }
+ },
+
+ isVisible: function(){
+ return this.mesh.visible;
+ },
+
+ isHighlighting: function(face){
+ return this.currentHighlightedFace == face;
+ },
+
+ highlightFace: function(intersection){
+ this.currentHighlightedFace = intersection.face;
+ this.mesh.geometry.vertices = this._calcNewHighlighterVertices(intersection.object, intersection.face);
+ this.mesh.geometry.verticesNeedUpdate = true;
+ },
+
+ _calcNewHighlighterVertices: function(object, face){
+ //the vertices don't include the position transformation applied to cell. Add these to create highlighter vertices
+ var vertices = object.geometry.vertices;
+ var position = (new THREE.Vector3()).setFromMatrixPosition(object.matrixWorld);
+ var newVertices = [(new THREE.Vector3()).addVectors(vertices[face.a], position),
+ (new THREE.Vector3()).addVectors(vertices[face.b], position), (new THREE.Vector3()).addVectors(vertices[face.c], position)];
+ var scale = this.model.get("scale");
+ _.each(newVertices, function(vertex){//apply scale
+ vertex.multiplyScalar(scale);
+ });
+ return newVertices;
+ },
+
+ getNextCellPosition: function(){
+ return this.mesh.geometry.vertices[0];
+ }
+
+});
\ No newline at end of file
diff --git a/js/threeViews/ThreeView.js b/js/threeViews/ThreeView.js
index bde28b8d884ca23e1a12c9d7664ba54e116a7a24..7272947a92ddcbfb8fa163c669510e1242d54c45 100644
--- a/js/threeViews/ThreeView.js
+++ b/js/threeViews/ThreeView.js
@@ -17,7 +17,6 @@ ThreeView = Backbone.View.extend({
//intersections/object highlighting
mouseProjection: new THREE.Raycaster(),
highlighter: null,
- currentHighlightedFace: null,
currentIntersectedCell: null,
currentIntersectedPart:null,
@@ -41,25 +40,12 @@ ThreeView = Backbone.View.extend({
this.$el.append(this.model.domElement);//render only once
//init highlighter
- this.highlighter = this._initHighlighter();
- window.three.sceneAdd(this.highlighter, null);
+ this.highlighter = new Highlighter({model:options.lattice});
this.model.render();
this._animate();
},
- _initHighlighter: function(){
- var highlightGeometry = new THREE.Geometry();
- //can't change size of faces or vertices buffers dynamically
- highlightGeometry.vertices = [new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0)];
- highlightGeometry.faces = [new THREE.Face3(0,1,2)];
- var highlighter = new THREE.Mesh(highlightGeometry,
- new THREE.MeshBasicMaterial({side:THREE.DoubleSide, transparent:true, opacity:0.4, color:0xffffff, vertexColors:THREE.FaceColors}));
- highlighter.geometry.dynamic = true;
- highlighter.visible = false;
- return highlighter;
- },
-
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////CONTROLS/////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@@ -131,7 +117,7 @@ ThreeView = Backbone.View.extend({
_setNoCellIntersections: function(){
this.currentIntersectedCell = null;
- this._hideHighlighter();
+ this.highlighter.hide();
},
_setNoPartIntersections: function(){
@@ -144,7 +130,7 @@ ThreeView = Backbone.View.extend({
_handlePartIntersections: function(intersections, distanceToNearestCell){
var part = intersections[0].object.myPart;
- if (this.highlighter.visible && intersections[0].distance > distanceToNearestCell){
+ if (this.highlighter.isVisible() && intersections[0].distance > distanceToNearestCell){
this._setNoPartIntersections();
return;
}
@@ -167,56 +153,39 @@ ThreeView = Backbone.View.extend({
}
// if (this.appState.get("extrudeMode") && this.mouseIsDown){
-// if (!this.highlighter.visible) return;
+// if (!this.highlighter.isVisible) return;
// this.extrudeVisualizer.makeMeshFromProfile([this.highlighter]);
// return;
// }
//check if we've moved to a new face
var intersection = intersections[0].face;
- if (this.highlighter.visible && this.currentHighlightedFace == intersection) return;
+ if (this.highlighter.isVisible() && this.highlighter.isHighlighting(intersection)) return;
if (intersection.normal.z<0.99){//only highlight horizontal faces
- this._hideHighlighter();
+ this.highlighter.hide();
return;
}
//update highlighter
- this.highlighter.visible = true;
- this.currentHighlightedFace = intersection;
- this.highlighter.geometry.vertices = this._calcNewHighlighterVertices(intersections[0].object, intersection);
- this.highlighter.geometry.verticesNeedUpdate = true;
+ this.highlighter.show(false);
+ this.highlighter.highlightFace(intersections[0]);
if (this.mouseIsDown && this.appState.get("shift")) this._addRemoveVoxel(true);
window.three.render();
},
- _calcNewHighlighterVertices: function(object, face){
- //the vertices don't include the position transformation applied to cell. Add these to create highlighter vertices
- var vertices = object.geometry.vertices;
- var position = (new THREE.Vector3()).setFromMatrixPosition(object.matrixWorld);
- return [(new THREE.Vector3()).addVectors(vertices[face.a], position),
- (new THREE.Vector3()).addVectors(vertices[face.b], position), (new THREE.Vector3()).addVectors(vertices[face.c], position)];
- },
-
_addRemoveVoxel: function(shouldAdd){
if (shouldAdd){
- if (!this.highlighter.visible) return;
- this.lattice.addCell(this.highlighter.geometry.vertices[0]);
+ if (!this.highlighter.isVisible()) return;
+ this.lattice.addCell(this.highlighter.getNextCellPosition());
} else {
if (this.currentIntersectedCell === this.model.basePlane[0]) return;
this.lattice.removeCellFromMesh(this.currentIntersectedCell);
}
- this._hideHighlighter();
- },
-
- _hideHighlighter: function(){
- if (this.highlighter.visible){
- this.highlighter.visible = false;
- window.three.render();
- }
+ this.highlighter.hide();
}
});
\ No newline at end of file
diff --git a/main.html b/main.html
index cc7d24c8f489c4d6c27071e8df27819939440dd3..19e10018edaaf6d3fa7d2f5687c87135305161d3 100644
--- a/main.html
+++ b/main.html
@@ -52,10 +52,10 @@
<!--models-->
<script src="js/models/AppState.js"></script>
+ <script src="js/models/Lattice.js"></script>
<script src="js/models/ThreeModel.js"></script>
<script src="js/models/FillGeometry.js"></script>
<script src="js/models/BasePlane.js"></script>
- <script src="js/models/Lattice.js"></script>
<script src="js/models/extrudeVisualizer.js"></script>
<!--views-->
@@ -66,9 +66,11 @@
<script src="js/menus/PartMenuView.js"></script>
<script src="js/menus/SketchMenuView.js"></script>
<script src="js/menus/ScriptMenuView.js"></script>
- <script src="js/threeViews/ThreeView.js"></script>
<script src="js/menus/exportMenu.js"></script>
+ <script src="js/threeViews/Highlighter.js"></script>
+ <script src="js/threeViews/ThreeView.js"></script>
+
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">