https://github.com/dougreeder/aframe-atoll-terrain
An A-Frame WebVR primitive that has a circle of high-resolution terrain near the origin, surrounded by a low-resolution sea or plain that stretches to the horizon
https://github.com/dougreeder/aframe-atoll-terrain
landscape terrain webvr webvr-aframe
Last synced: 6 months ago
JSON representation
An A-Frame WebVR primitive that has a circle of high-resolution terrain near the origin, surrounded by a low-resolution sea or plain that stretches to the horizon
- Host: GitHub
- URL: https://github.com/dougreeder/aframe-atoll-terrain
- Owner: DougReeder
- License: mit
- Created: 2019-03-12T05:25:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T21:49:21.000Z (about 1 year ago)
- Last Synced: 2025-02-21T09:45:28.413Z (8 months ago)
- Topics: landscape, terrain, webvr, webvr-aframe
- Language: JavaScript
- Homepage:
- Size: 1.18 MB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
aframe-atoll-terrain
====================
An [A-Frame](https://aframe.io) [WebVR](https://webvr.info/) primitive that has a circle of high-resolution terrain near the origin,
surrounded by a low-resolution sea or plain that stretches to the horizon.
Optionally, the high-resolution area can include a central plateau or sea.
Uses a grid of equilateral triangles for efficiency.
Usable on mobile, with moderate detail.
Pairs well with [aframe-simple-sun-sky](https://www.npmjs.com/package/aframe-simple-sun-sky)
or [aframe-sun-sky](https://www.npmjs.com/package/aframe-sun-sky)
[live example scene](https://dougreeder.github.io/aframe-atoll-terrain/example.html)
Use VR controller joystick or touchpad to move around. On desktop, drag to turn and use WASD keys to move.
Reload several times to see some variations, especially if you don't see water from your initial location.
Usage
---
Include using
```html
```
Declare it as a direct child of the scene (normally):
```html
```
Parameters
---
Typically, you'll leave the entity position and rotation as zero, but you don't have to.
### plateau-radius
* default: 10
* minimum: 0
* maximum: middle-radius - 2*unit-size
Radius of the central plateau, in meters.
If radius is 0, there is no plateau.
### plateau-elevation
* minimum: 0
* default: 1
Elevation of the plateau. If zero, forces there to be water in the center of the island.
If this is zero and `plateau-radius` is a large fraction of `middle-radius`, you'll have a ring-shaped island - an atoll!
### elevation-bias
* default: 0
When there is no plateau, this is the elevation of the high-resolution area before noise is applied, in meters.
When there is a plateau, the elevation of the high-resolution area is automatically adjusted so the plateau blends in.
Leave this at zero, unless you want a volcano or an isolated plateau.
### plateau-yin-color, plateau-yang-color
* default: land-yin-color, land-yang-color
Values close to land-yin-color and land-yang-color typically work best.
### middle-radius
* default: 100
Radius of the high-resolution area, in meters.
### unit-size
* default: 1
Distance between vertexes in the high-resolution area, in meters.
Will be adjusted to be a simple fraction of middle-radius, if necessary.
### far
* default: 4000
* minimum: middle-radius + unit-size
Radius of the low-resolution plain, in meters.
Thus, it's also the distance to the effective horizon.
Should be about 80% of the radius of your sky sphere.
### land-yin-color, land-yang-color
* defaults: #528d04, #278d53
The color of the land smoothly varies between these two extremes.
Typically, you'll want them to vary mostly by hue and saturation, rather than intensity.
Noise will cause brief excursions outside this range.
### sea-yin-color, sea-yang-color
* defaults: #528d04, #278d53
The color of the sea smoothly varies between these two extremes.
### sun-position
* default: {x:-1.0, y:1.0, z:-1.0}
The direction from which the sun is shining.
This primitive ignores directional lights.
If you're using one of the *-sun-sky primitives, set its sun-position to the same value.
### shader
* default: 'vertex-color+noise'
If you use a different shader, the colors and sun-position will probably be ignored.
### seed
* default: random
A number greater than zero and less than one, from which the terrain will be randomly generated.
### log
* default: false
Whether to write diagnostic data to the console.
Extracting Elevation data
-------------------------
The geometry component has a `getElevation` method, which returns the approximate elevation of a point:
```javascript
const terrainGeometry = this.el.querySelector('a-atoll-terrain').getAttribute('geometry');
const spherePosition = document.querySelector('a-sphere').getAttribute('position');
spherePosition.y = terrainGeometry.getElevation(spherePosition.x, spherePosition.z) + 1.6;
```
Development
---
`npm install`
edit files
`npm run-script build`
Internals
---
The geometry component sets vertex colors, so you should probably use a material that uses them.