https://github.com/akbartus/a-frame-component-three-geo-updated
This is an updated version of three-geo component for A-Frame
https://github.com/akbartus/a-frame-component-three-geo-updated
a-frame aframevr mapping three-geo
Last synced: 4 months ago
JSON representation
This is an updated version of three-geo component for A-Frame
- Host: GitHub
- URL: https://github.com/akbartus/a-frame-component-three-geo-updated
- Owner: akbartus
- License: mit
- Created: 2023-06-13T18:44:32.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-14T16:47:22.000Z (about 3 years ago)
- Last Synced: 2025-02-28T19:27:02.112Z (over 1 year ago)
- Topics: a-frame, aframevr, mapping, three-geo
- Language: HTML
- Homepage: https://three-geo.glitch.me/
- Size: 2.78 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame Component: Three-Geo (Updated Version)
### **Description / Rationale**
This is an updated version of A-Frame component for "Three-geo", the library for 3D geographic visualization. The original version of the component was developed by KJStrand. The updated version is compatible with latest version of A-frame and has the following new features:
* The component and three-geo files were combined into single file;
* Flat map style was added;
* Possibility of selecting the style of the map: elevated, wireframe and contour
* Possibility of assigning color to wireframe styled map.
### **Instructions**
In order to use the component attach "three-geo" to any entity. The component has the following attributes:
* token: { type: 'string', default: '*******' } - Token generated by Mapbox.
* lat: { type: 'number', default: 35.3778 } - latitude of the location on Mapbox.
* lng: { type: 'number', default: 138.7472 } - longitude of the location on Mapbox.
* radius: { type: 'number', default: 5.0 } - radius of bounding circle (km).
* zoom: { type: 'number', default: 10 } - zoom level.
* axesHelper: { type: 'boolean', default: false } - Axes helper to learn about orientation in 3d space.
* flatMap: { type: 'boolean', default: false } - Flat map style without any elevations.
* mapStyle: { type: 'string', default: "elevated" } - The following map styles are present: elevated, wireframe and contour. Will show if flatMap is false.
* wireframeColor: { type: 'color', default: "#ffffff" } - if wireframe map style is selected, allows to change the color of the wireframe.
The code below shows the sample implementation of the component:
```
A-Frame Component: Three-geo (Updated)
```
To learn more about "Three-geo" library, check the repository page of it.
### **Tech Stack**
The project is powered by AFrame and Three.js.
### **Demo**
See demo of the component here: [Demo](https://three-geo.glitch.me/)