Add polygon material props

README.md

@@ -65,7 +65,9 @@ Uses [three-globe](https://github.com/vasturiano/three-globe) as the underlying
 | polygons-data | Getter/setter for the list of polygon shapes to represent in the polygons map layer. Each polygon is displayed as a shaped cone that extrudes from the surface of the globe. | `[]` |
 | polygon-geo-json-geometry | Polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: `type` and `coordinates`. Only GeoJson geometries of type `Polygon` or `MultiPolygon` are supported, other types will be skipped. | `geometry` |
 | polygon-cap-color | Polygon object accessor function or attribute for the color of the top surface. | `() => '#ffffaa'` |
+| polygon-cap-material | Polygon object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) to use in the top surface. This property takes precedence over `polygon-cap-color`, which will be ignored if both are defined. | - |
 | polygon-side-color | Polygon object accessor function or attribute for the color of the cone sides. | `() => '#ffffaa'` |
+| polygon-side-material | Polygon object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) to use in the cone sides. This property takes precedence over `polygon-side-color`, which will be ignored if both are defined. | - |
 | polygon-stroke-color | Polygon object accessor function or attribute for the color to stroke the polygon perimeter. A falsy value will disable the stroking. | - |
 | polygon-altitude | Polygon object accessor function, attribute or a numeric constant for the polygon cone's altitude in terms of globe radius units (`0` = 0 altitude (flat polygon), `1` = globe radius). | 0.01 |
 | polygon-cap-curvature-resolution | Polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the cap surface curvature. The finer the resolution, the more the polygon is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. | 5 |
@@ -130,7 +132,7 @@ Uses [three-globe](https://github.com/vasturiano/three-globe) as the underlying
 | tile-width | Tile object accessor function, attribute or a numeric constant for the segment's longitudinal width, in angular degrees. | 1 |
 | tile-height | Tile object accessor function, attribute or a numeric constant for the segment's latitudinal height, in angular degrees. | 1 |
 | tile-use-globe-projection | Tile object accessor function, attribute or a boolean constant for whether to use the globe's projection to shape the segment to its relative tiled position (`true`), or break free from this projection and shape the segment as if it would be laying directly on the equatorial perimeter (`false`). | `true` |
-| tile-material | Tile object accessor function or attribute for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) used to style the segment's surface. | `() => new MeshLambertMaterial({ color: '#ffbb88' })` |
+| tile-material | Tile object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) used to style the segment's surface. | `() => new MeshLambertMaterial({ color: '#ffbb88' })` |
 | tile-curvature-resolution | Tile object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the surface curvature. The finer the resolution, the more the tile geometry is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. | 5 |
 | tiles-transition-duration | Getter/setter for duration (ms) of the transition to animate tile changes involving geometry modifications. A value of `0` will move the tiles immediately to their final position. New tiles are animated by scaling them from the centroid outwards. | 1000 |
 

index.js

@@ -78,7 +78,9 @@ AFRAME.registerComponent('globe', {
     polygonsData: { parse: parseJson, default: [] },
     polygonGeoJsonGeometry: { parse: parseAccessor, default: 'geometry' },
     polygonCapColor: { parse: parseAccessor, default: function () { return '#ffffaa'; } },
+    polygonCapMaterial: { parse: parseAccessor, default: null },
     polygonSideColor: { parse: parseAccessor, default: function () { return '#ffffaa'; } },
+    polygonSideMaterial: { parse: parseAccessor, default: null },
     polygonStrokeColor: { parse: parseAccessor, default: null },
     polygonAltitude: { parse: parseAccessor, default: 0.01 },
     polygonCapCurvatureResolution: { parse: parseAccessor, default: 5 },
@@ -265,7 +267,9 @@ AFRAME.registerComponent('globe', {
       'polygonsData',
       'polygonGeoJsonGeometry',
       'polygonCapColor',
+      'polygonCapMaterial',
       'polygonSideColor',
+      'polygonSideMaterial',
       'polygonStrokeColor',
       'polygonAltitude',
       'polygonCapCurvatureResolution',

package.json

@@ -46,13 +46,13 @@
   ],
   "dependencies": {
     "accessor-fn": "^1.3.0",
-    "three-globe": "^2.11.1"
+    "three-globe": "^2.13.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.12.9",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
     "@babel/plugin-proposal-do-expressions": "^7.12.1",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
@@ -67,7 +67,7 @@
     "@babel/plugin-proposal-throw-expressions": "^7.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-env": "^7.12.11",
     "aframe": "*",
     "babel-loader": "^8.2.2",
     "babel-preset-minify": "^0.5.1",
@@ -94,9 +94,9 @@
     "snazzy": "^8.0.0",
     "superagent": "^5.3.1",
     "three": "*",
-    "webpack": "^5.9.0",
+    "webpack": "^5.19.0",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-dev-server": "^3.11.2",
     "webpack-sources": "2.2.0"
   },
   "semistandard": {