better triangulation algorithm with earcut

lautr3k · Mar 18, 2016 · 8424d63009e606056778857da1d886cbc632bb62 · 8424d63
1 parent 336ca53
commit 8424d63009e606056778857da1d886cbc632bb62
Unified Split

Showing with 1,019 additions and 9 deletions.

+3 −0 index.html

+50 −4 js/main.js

+644 −0 vendor/earcut.js

+319 −0 vendor/triangulation.js

+3 −5 vendor/triangulation/.gitignore
diff --git a/index.html b/index.html
@@ -195,12 +195,15 @@ <h3 class="panel-title">Screen</h3>
             </div><!-- #main -->
 
         </div><!-- .body -->
+
         <script src="vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
         <script src="vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
         <script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
         <script src="vendor/bootstrap-slider/bootstrap-slider.min.js" type="text/javascript"></script>
         <script src="vendor/lodash.min.js" type="text/javascript"></script>
         <script src="vendor/three.min.js" type="text/javascript"></script>
+        <script src="vendor/earcut.js" type="text/javascript"></script>
+        <script src="vendor/triangulation.js" type="text/javascript"></script>
         <script src="js/slacer/settings.js" type="text/javascript"></script>
         <script src="js/slacer/mesh.js" type="text/javascript"></script>
         <script src="js/slacer/viewer.js" type="text/javascript"></script>

diff --git a/js/main.js b/js/main.js
@@ -68,14 +68,46 @@ function errorHandler(error) {
 // Slicer
 // -----------------------------------------------------------------------------
 var slicer = new SLAcer.Slicer();
+var shapes;
+
+function removeShapes() {
+    if (shapes && shapes.length) {
+        for (var i = 0, il = shapes.length; i < il; i++) {
+            viewer3d.removeObject(shapes[i]);
+        }
+    }
+}
 
 function slice(layerNumber) {
+    // remove old shapes
+    removeShapes();
+
+    if (layerNumber < 1) {
+        viewer3d.render();
+        return;
+    }
+
     // get slice
     var layerHeight = settings.get('slicer.layers.height') / 1000;
     var zPosition   = layerNumber * layerHeight;
     var slice       = slicer.getFaces(zPosition);
-    console.log('layer number:', layerNumber);
-    console.log('z position  :', zPosition);
+
+    //console.log('layer number:', layerNumber);
+    //console.log('z position  :', zPosition);
+
+    // get new shapes list
+    shapes = slice.shapes;
+    zPosition -= settings.get('buildVolume.size.z') / 2;
+
+    // add new shapes
+    for (var i = 0, il = shapes.length; i < il; i++) {
+        shapes[i].position.z = zPosition;
+        shapes[i].material.depthTest = false;
+        viewer3d.scene.add(shapes[i]);
+    }
+
+    // render
+    viewer3d.render();
 }
 
 // -----------------------------------------------------------------------------
@@ -92,6 +124,10 @@ var viewer3d  = new SLAcer.Viewer3D({
     target     : $viewer3d[0]
 });
 
+// Triangulation algorithm
+//THREE.Triangulation.setTimer(true);
+THREE.Triangulation.setLibrary('earcut');
+
 // Slider
 var $sliderInput = $('#slider input');
 
@@ -100,6 +136,8 @@ $sliderInput.slider({ reversed : true }).on('change', function(e) {
 });
 
 var $sliderElement = $('#slider .slider');
+var $sliderMinValue = $('#slider .min');
+var $sliderMaxValue = $('#slider .max');
 
 
 // Sidebar
@@ -173,8 +211,13 @@ var $meshSizeZ    = $meshBody.find('#mesh-size-z');
 var $meshSizeUnit = $meshBody.find('.mesh-size-unit');
 
 function updateMeshInfoUI(mesh) {
-    var size = mesh.getSize();
-    var unit = settings.get('buildVolume.unit');
+    var size         = mesh.getSize();
+    var unit         = settings.get('buildVolume.unit');
+    var layersHeight = settings.get('slicer.layers.height') / 1000;
+    var layersNumber = Math.ceil(size.z / layersHeight);
+
+    $sliderInput.slider('setAttribute', 'max', layersNumber);
+    $sliderMaxValue.html(layersNumber);
 
     $meshSizeUnit.html(unit);
 
@@ -321,6 +364,9 @@ loader.onGeometry = function(geometry) {
         // remove old mesh and plane
         slicer.mesh && viewer3d.removeObject(slicer.mesh);
 
+        // remove old shapes
+        removeShapes();
+
         // load new mesh in slicer
         slicer.loadMesh(new SLAcer.Mesh(geometry, new THREE.MeshPhongMaterial({
             color: settings.get('mesh.color')