From b5af1ad01f3e832af213ebc9a42a8e1ac250bb02 Mon Sep 17 00:00:00 2001 From: amandaghassaei Date: Sun, 26 Feb 2017 19:04:37 -0500 Subject: [PATCH] adding mesh --- dependencies/earcut.js | 8 ++-- index.html | 1 + js/pattern.js | 95 +++++++++++++++++++++++++++++++++--------- 3 files changed, 81 insertions(+), 23 deletions(-) diff --git a/dependencies/earcut.js b/dependencies/earcut.js index 4b9dde7..775edd7 100755 --- a/dependencies/earcut.js +++ b/dependencies/earcut.js @@ -520,8 +520,8 @@ function middleInside(a, b) { // link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two; // if one belongs to the outer ring and another to a hole, it merges it into a single ring function splitPolygon(a, b) { - var a2 = new Node(a.i, a.x, a.y), - b2 = new Node(b.i, b.x, b.y), + var a2 = new EarNode(a.i, a.x, a.y), + b2 = new EarNode(b.i, b.x, b.y), an = a.next, bp = b.prev; @@ -542,7 +542,7 @@ function splitPolygon(a, b) { // create a node and optionally link it with previous one (in a circular doubly linked list) function insertNode(i, x, y, last) { - var p = new Node(i, x, y); + var p = new EarNode(i, x, y); if (!last) { p.prev = p; @@ -565,7 +565,7 @@ function removeNode(p) { if (p.nextZ) p.nextZ.prevZ = p.prevZ; } -function Node(i, x, y) { +function EarNode(i, x, y) { // vertice index in coordinates array this.i = i; diff --git a/index.html b/index.html index 57498c0..f546f5e 100644 --- a/index.html +++ b/index.html @@ -241,6 +241,7 @@ + diff --git a/js/pattern.js b/js/pattern.js index 909019e..2111e4d 100644 --- a/js/pattern.js +++ b/js/pattern.js @@ -43,6 +43,7 @@ function initPattern(globals){ var stroke = \$(this).attr("stroke").toLowerCase(); return stroke == "#000000" || stroke == "#000"; }); + // \$outlines.css({fill:'#ffffff'}); var \$mountains = \$paths.filter(function(){ var stroke = \$(this).attr("stroke").toLowerCase(); @@ -214,10 +215,25 @@ function initPattern(globals){ vertices = mergedVertices; - findPolygons(); - //triangulate - drawPattern(); - //make mesh + drawPattern(triangulatePolys(findPolygons())); + } + + function triangulatePolys(polygons){ + var faces = []; + for (var i=0;iedges.length;j++){ + for (var j=0;ji) { if (!edgesDir1[edgeIndex]){ _poly.push(otherVertex); - edgesDir1[edgeIndex] = true; - _poly = findNextPolyVert(_poly, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); - if (_poly) console.log(_poly); + _polyEdges.push(edgeIndex); + _poly = findNextPolyVert(_poly, _polyEdges, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); + if (_poly) { + for (var k=0;k<_polyEdges.length;k++){ + var index = _polyEdges[k]; + if (index<0) { + index = -index-1; + edgesDir2[index] = true; + } else { + edgesDir1[index] = true; + } + } + polygons.push(_poly); + } } } else { if (!edgesDir2[edgeIndex]){ _poly.push(otherVertex); - edgesDir2[edgeIndex] = true; - _poly = findNextPolyVert(_poly, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); - if (_poly) console.log(_poly); + _polyEdges.push(-edgeIndex-1); + _poly = findNextPolyVert(_poly, _polyEdges, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); + if (_poly) { + for (var k=0;k<_polyEdges.length;k++){ + var index = _polyEdges[k]; + if (index<0) { + index = -index-1; + edgesDir2[index] = true; + } else { + edgesDir1[index] = true; + } + } + polygons.push(_poly); + } } } - } } + // for (var index=0;index=edges.length) index = 0; var edgeIndex = edges[index]; + if (_polyEdges.indexOf(edgeIndex)>=0) return null;//cant traverse same edge twice in one poly var edgeVertices = allEdges[edgeIndex]; var otherVertex = edgeVertices[0]; if (otherVertex == vertIndex) otherVertex = edgeVertices[1]; - if (otherVertex>i) { + if (otherVertex>vertIndex) { if (!edgesDir1[edgeIndex]) { _poly.push(otherVertex); - edgesDir1[edgeIndex] = true; + _polyEdges.push(edgeIndex); if (otherVertex == _poly[0]) return _poly; - else return findNextPolyVert(_poly, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); + else return findNextPolyVert(_poly, _polyEdges, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); } else return null; } if (!edgesDir2[edgeIndex]){ _poly.push(otherVertex); - edgesDir2[edgeIndex] = true; + _polyEdges.push(-edgeIndex-1); if (otherVertex == _poly[0]) return _poly; - else findNextPolyVert(_poly, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); + else findNextPolyVert(_poly, _polyEdges, edgeIndex, otherVertex, vertEdges, allEdges, edgesDir1, edgesDir2); } return null; } @@ -425,8 +474,16 @@ function initPattern(globals){ }; } - function drawPattern(){ + function drawPattern(faces){ object3D.children = []; + + var geo = new THREE.Geometry(); + geo.vertices = vertices; + geo.faces = faces; + geo.computeVertexNormals(); + var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({side:THREE.DoubleSide, color:0xffffff})); + object3D.add(mesh); + object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(outlines), new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4}))); object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(mountains), -- GitLab