Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bryik/aframe-terrain-model-component
Create terrain for A-Frame scenes with data!
https://github.com/bryik/aframe-terrain-model-component
aframe terrain
Last synced: 2 months ago
JSON representation
Create terrain for A-Frame scenes with data!
- Host: GitHub
- URL: https://github.com/bryik/aframe-terrain-model-component
- Owner: bryik
- License: mit
- Created: 2016-08-10T20:07:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-01T02:37:28.000Z (over 1 year ago)
- Last Synced: 2024-10-31T05:35:07.876Z (3 months ago)
- Topics: aframe, terrain
- Language: JavaScript
- Homepage: https://bryik.github.io/aframe-terrain-model-component/
- Size: 36.9 MB
- Stars: 45
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- vr-resources - aframe-terrain-model-component, Create terrain for A-Frame scenes with data!
README
## aframe-terrain-model-component
This is an A-Frame component for displaying ENVI formatted, digital elevation models (DEMs).
The basic idea is to create a large plane with a certain width, height, and number of vertices. Each vertex is then repositioned based on elevation from a digital elevation model (DEM). The DEM must be in ENVI format--see [this blog post](http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs-part-1.html) for conversion details.
## Usage
### Browser
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
### npm
Alternatively, install via npm:
```bash
npm install aframe-terrain-model-component
```
Then register and use.
```js
require("aframe");
require("aframe-terrain-model-component");
```
## API
### Properties
| Property | Description | Default Value |
| :------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
| dem | Path to digital elevation model data in ENVI format. | |
| map | Path to a color texture. | |
| alphaMap | The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). | |
| planeHeight | The height of the plane. | |
| planeWidth | The width of the plane. | |
| segmentsHeight | Width of elevation grid minus one. | 199 |
| segmentsWidth | Height of elevation grid minus one. | 199 |
| zPosition | Vertical exaggeration. Lower values will seem flatter, higher values more mountainous. | 1.5 |
| wireframe | Adds a wireframe | false |
The relationship between these properties and the DEM data may not be straightforward.
The **height** and **width** of the plane should have the same ratio as the height and width of the area covered by your DEM. For instance, if you've clipped your DEM down to an image/grid size of 6000 px by 6000 px then planeHeight and planeWidth could be set to 60.
The **segmentsHeight** and **segmentsWidth** values should be set to ["the width and height of your elevation grid minus one"](http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs.html). The height and width of your elevation grid was probably determined during the conversion to ENVI.
e.g.
gdal_translate -scale 0 2470 0 65535 -ot UInt16 -outsize 200 200 -of ENVI jotunheimen.tif jotunheimen.bin
Corresponds to a segmentsHeight and segmentsWidth value of 199.
These values seem to control the "resolution" of the elevation data. [The L.A. Times](http://graphics.latimes.com/mars-gale-crater-how-we-did-it/) has this to say:
> "You'll notice we specified the -outsize parameter, which specifies the number of data points in the output file, and the number of vertices in the plane in the Three.js scene. This can be as high or low as you want, but you'll find that larger values can be very taxing on the graphics processor when rendering the scene. We found that using 300 x 285 provided a good amount of detail without stressing out the GPU too much. For phones, we used a smaller file, 200 x 190, and for some phones even went to a 100 x 95 file, to ensure that the interactive ran smoothly."
Lastly, **zPosition** controls vertical exaggeration. It is a kind of scaling factor that alters terrain height. I'm not sure how to determine an accurate value for this; my tactic is to adjust until the result is aesthetically pleasing. The L.A. Times used a value of 100 for their Gale Crater experience, Sandvik used 5 for Jotunheimen, and I used 50 for the crater floor example.
### Events
| Name | Description |
| :-------------------: | :-------------------------------------------------------------------------------------------: |
| textureLoaded | Emitted when a texture has finished loading |
| demLoaded | Emitted when a DEM has finished loading |
| positionBufferUpdated | Emitted after the terrain geometry's position attribute buffer has been adjusted by a new DEM |
## FAQ
### Does this component work with A-Frame's asset management system?
Yes, _kind of_. Assets loaded through the asset management system are cached by three.js' loaders; since this component uses three.js' loaders, textures should not be downloaded twice.
```html
```
However, passing resources by selector is not currently supported.
```html
```
## References
- "Terrain Building with Three.js" by Bjørn Sandvik (Parts [I](http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs-part-1.html), [II](http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs.html), and [III](http://blog.thematicmapping.org/2013/10/textural-terrains-with-threejs.html))
- ["Discovering Gale Crater: How we did it"](http://graphics.latimes.com/mars-gale-crater-how-we-did-it/) by Armand Emamdjomeh and Len Degroot
- ["vr-interactives-three-js"](https://github.com/datadesk/vr-interactives-three-js) by Armand Emamdjomeh
Till Hinrichs' [orbit-controls-component](https://github.com/tizzle/aframe-orbit-controls-component) is used in some of the examples.
For a different take on terrain, checkout Morandd's [aframe-heatmap3d](https://github.com/morandd/aframe-heatmap3d) component.
**Data (DEM and textures)**
The Gale-Crater and Jotunheimen examples were created by journalists from the L.A. Times and Bjørn Sandvik respectively. The Jotunheimen data was obtained from [The Norwegian Mapping Authority](http://statkart.no/en/).
All Mars examples use public domain data from [HiRISE](http://www.uahirise.org//dtm/) (credit: NASA/JPL/University of Arizona).
- [Faulted Layered Bedrock in Noctis Labyrinthus](http://hirise.lpl.arizona.edu/dtm/dtm.php?ID=ESP_016845_1715).
- [Crater Floor and Central Mound in Gale Crater (MSL)](http://www.uahirise.org/dtm/dtm.php?ID=PSP_009650_1755).
- [Olympic-Peninsula](https://www.sciencebase.gov/catalog/item/5646dc56e4b0e2669b311a3b).