From 7b7fec88e0b118622cea912767b353d3115e9945 Mon Sep 17 00:00:00 2001
From: Steve Brudz <sbrudz@gmail.com>
Date: Fri, 3 Nov 2017 17:07:56 -0500
Subject: [PATCH] Draw outline of states instead of mesh

---
 app/lib/plane-map-component.js | 27 ++++++++++++++++++++++-----
 app/vr-election-map.js         |  2 +-
 www/vr-election-map.html       |  4 ++--
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/lib/plane-map-component.js b/app/lib/plane-map-component.js
index 1500989..9645807 100644
--- 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,8 +122,12 @@ 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);
@@ -120,10 +135,12 @@ AFRAME.registerComponent("plane-map", {
             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
index c660638..b941cd6 100644
--- 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
index 6d83e3a..9261b2c 100644
--- a/www/vr-election-map.html
+++ b/www/vr-election-map.html
@@ -20,7 +20,7 @@
 
 
     <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;"
@@ -28,7 +28,7 @@
               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"