Skip to content

Commit

Permalink
Add polygon material props
Browse files Browse the repository at this point in the history
  • Loading branch information
vasturiano committed Feb 2, 2021
1 parent 30ded58 commit a7a8dca
Show file tree
Hide file tree
Showing 6 changed files with 706 additions and 1,859 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down Expand Up @@ -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 |

Expand Down
1,447 changes: 149 additions & 1,298 deletions dist/aframe-globe-component.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/aframe-globe-component.min.js

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -265,7 +267,9 @@ AFRAME.registerComponent('globe', {
'polygonsData',
'polygonGeoJsonGeometry',
'polygonCapColor',
'polygonCapMaterial',
'polygonSideColor',
'polygonSideMaterial',
'polygonStrokeColor',
'polygonAltitude',
'polygonCapCurvatureResolution',
Expand Down
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
Loading

0 comments on commit a7a8dca

Please sign in to comment.