Draw outline of states instead of mesh

EarthlingInteractive · Nov 3, 2017 · 7b7fec8 · 7b7fec8
1 parent df1fb6b
commit 7b7fec8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/app/lib/plane-map-component.js b/app/lib/plane-map-component.js
@@ -34,6 +34,17 @@ class ThreeJSRenderContext {
     toShapes() {
         return this.shapePath.toShapes(true);
     }
+    toVertexes() {
+        const geometry = new THREE.Geometry();
+        this.shapePath.subPaths.forEach((line) => {
+            line.curves.forEach((lineCurve) => {
+                const a = new THREE.Vector3(lineCurve.v1.x, lineCurve.v1.y, 0);
+                const b = new THREE.Vector3(lineCurve.v2.x, lineCurve.v2.y, 0);
+                geometry.vertices.push(a, b);
+            });
+        });
+        return geometry;
+    }
 }
 
 AFRAME.registerComponent("plane-map", {
@@ -111,19 +122,25 @@ AFRAME.registerComponent("plane-map", {
             }
         };
         // const projection = d3.geoStereographic().scale(0.5).translate([0, 0]).center([-73.968285, 40.785091]);
-        const material = new THREE.MeshStandardMaterial({ color: "blue", side: THREE.DoubleSide });
-
+        // const material = new THREE.MeshBasicMaterial({ color: "gray" });
+        const material = new THREE.LineBasicMaterial({
+            linewidth: 1,
+            color: "#ff00f1",
+            side: THREE.DoubleSide
+        });
         geoJsonMesh.features.forEach(feature => {
             const renderContext = new ThreeJSRenderContext();
             const path = d3.geoPath(projectionInAFrameCoords, renderContext);
             path(feature);
             const [centerX, centerY] = path.centroid(feature);
             const [[x0, y0], [x1, y1]] = path.bounds(feature);
 
-            const shapes = renderContext.toShapes();
-            const geometry = new THREE.ShapeGeometry(shapes);
+            // const shapes = renderContext.toShapes();
+            // console.log(shapes);
+            // const geometry = new THREE.ShapeBufferGeometry(shapes);
+            const geometry = renderContext.toVertexes();
             geometry.translate(-centerX, -centerY, 0);
-            const mesh = new THREE.Mesh(geometry, material);
+            const mesh = new THREE.LineSegments(geometry, material);
             const entity = document.createElement("a-entity");
             entity.setAttribute("position", `${ centerX } ${ centerY } 0`);
             entity.setAttribute("width", `${ x1 - x0 }`);

diff --git a/app/vr-election-map.js b/app/vr-election-map.js
@@ -89,7 +89,7 @@ const ready = (error, data) => {
 
         const width = +stateContainer.attr("width");
         const height = +stateContainer.attr("height");
-        const maxRadius = (d3.min([width, height]) / 2);
+        const maxRadius = (d3.min([width, height]) / 3);
         rscale.range([0, maxRadius]);
 
         let prevCylTop = 0;

diff --git a/www/vr-election-map.html b/www/vr-election-map.html
@@ -20,15 +20,15 @@
 
 
     <a-entity id="plane-map"
-              position="0 -2 -8"
+              position="0 0 0"
               rotation="-90 0 0"
               geometry="primitive: plane; height: 10; width: 15;"
               material="color: lightgray; transparent: false;"
               plane-map="src: #json-states-10m; lineWidth: 1;"
               visible="true"
     >
     </a-entity>
-    <a-camera id="camera"  user-height="0" wasd-controls-enabled="true" look-controls-enabled="true">
+    <a-camera id="camera" wasd-controls-enabled="true" look-controls-enabled="true">
         <a-entity id="infoText"
                   position="0.9 0 -2"
                   visible="false"